How to implement ajax with jquery validation plugin

2

This is the code that I am using alctualmentememando an error of Can not post to be sent someone knows what I am doing wrong or what is the correct form.
I also want that after sending the data it shows me the thank you div and the h1 of thank you entering. How should I do it?

*

<form class="cmxform" id="formSunny" method="post" action="" 
      novalidate="novalida'introducir el código aquí'te">
          <div class= "form">
            <h1>ENTER FOR A CHANCE TO WIN!</h1>
     <label class="title-form" > YOUR NAME</label>
              <div class="input-container">
                  <input type="text" id="firstname" name ="firstname"  
    maxlength="12" required class="textbox" size="25" />
               </div>
                <label class="title-form" >YOUR EMAIL</label>
                <div class="input-container">
               <input type="email" id="email" name="email" class="textbox"   
      required size="25"/>
             </div>
             <label class="title-form">BIRTHDAY DAY</label>
             <div class="input-birthday">
  <div class="dropdown-form">
  <div class="drop-elements">
        <select id="dropMonth" name="selectmonth">
          <option value="">MM</option>
           <option value="1">01</option>
           <option value="2">02</option>
           <option value="3">03</option>
           <option value="4">04</option>
          <option value="5">05</option>
           <option value="6">06</option>
          <option value="7">07</option>
      <option value="8">08</option>
      <option value="9">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </div>
  <div class="drop-elements" >
    <select id="dropDay"name="selectday">
      <option value="">DD</option>
      <option value="1">01</option>
    </select>
    <label id="select-day-error" class="error" for="select-day" style=""></label>
  </div>
  <div class="drop-elements">
      <select id="dropYear" name="selectyear">
      <option value="">YYYY</option>
      <option value="2001">2002</option>
      <
    </select>
  </div>
</div>
<div class="hidden-input">
<div class="hidden-element">
  <input type="text" id="hiddeninput" name ="hiddeninput"  />
</div>
<div>
<label id="hiddeninput-error" class="error" for="hiddeninput" style=""></label>
 </div>
 </div>
  </div>
     <input type="submit" class="button" id="btn" value="CTA">
     </div>
    </form>

*

      $(document).ready(function() {
        introtestInit();

      $("#thankyou").hide();

  $("#firstname").keypress(function(firstname) {
    if (
      (firstname.charCode < 97 || firstname.charCode > 122) &&
      (firstname.charCode < 65 || firstname.charCode > 90) &&
      firstname.charCode !== 45
    )
      return false;
  });

  $("#firstname").keydown(function(firstname) {
    if (firstname.keyCode === 109) {
      return false;
    }
  });

  $.validator.addMethod(
    "check_date_of_birth",
    function(value, element) {
      var day = $("#dropDay").val();
      var month = $("#dropMonth").val();
      var year = $("#dropYear").val();
      var age = 18;

      var mydate = new Date();
      mydate.setFullYear(year, month - 1, day);

      var currdate = new Date();
      currdate.setFullYear(currdate.getFullYear() - age);

      return currdate > mydate;
    },
    "You must be at least 18 years of age."
  );

  $("#formSunny").validate({
    rules: {
      firstname: {
        required: true,
        lettersonly: true,
        maxlength: 12
      },
      email: {
        required: true,
        email: true
      },
      agree: "required",
      selectmonth: "required",
      selectday: "required",
      selectyear: "required",

      hiddeninput: { check_date_of_birth: true }
    },
    messages: {
      firstname: "Enter your first name",
      email: "Enter a valid email",
      selectmonth: "Required",
      selectday: "Required",
      selectyear: "Required",
      agree: "Please check this box in order to proceed"
    },
  submitHandler: function(form) {
              $(form).ajaxSubmit({
                       url:"",
                       type:"post",
                       success: function(){
                         alert('inside');
                         $('#contact-form').hide();
                         $('#sent').show();
                 }
               });
     }
   }
    }
  });
});
    
asked by Amarilis Iveth Alveo 27.03.2018 в 20:12
source

0 answers