如何在ajax调用表单提交之前调用javascript验证函数

问题描述：

Here is my validate() function, returns either true or false. My problen is i want to call ajax submit form code only if validate() returns true, otherwise it will show the alert with error messages for not valid data and stay in page Without submitting the form , without using ajax I know that i can use if true return document.form2.submit();but in my case it doesn't work, Please help!

Ajax Code :

$("#form2").submit(function(){

var formData = new FormData($(this)[0]);
$.ajax({
    url: "addv.php",
    type: 'POST',
    data: formData,
    success: function (data) {
        $('.fv').html(data).hide().fadeIn(500).delay(1000).fadeOut(500);
    },
    contentType: false,
    processData: false
}); 

return false;
});

javascript function :

function validate()
{
    var m=document.getElementById("mat").value;
    var c=document.getElementById("kilo").value;
    var v=true;
    if(!isNaN(m))
        {
          alert("matricule  doit etre une chaine !");
          document.getElementById("mat").value=null;
          v=false;
        }
    if(isNaN(c))
        {
          alert("kilométrage doit etre un entier !");
          document.getElementById("kilo").value=null;  
          v=false;
        }
       return v;
}

Form :

  <form enctype="multipart/form-data" class="form2" id="form2">
         <label >Matricule</label></br>
         <input type="text" name="mat"></br>
         <label>kilométrage</label></br>
         <input type="text" name="kilo"></br>
         <label>Marque</label>  </br>
         <select name="mar" id="mar">
          <?php  
            while($res=mysqli_fetch_array($req1))
            {
              echo "<option> $res[0] </option>";
            }
          ?>    
         </select>
         <label>Propriétaire Cin</label>  </br>
         <select name="pro" id="prop" onchange=fn()>
          <?php  
            while($res=mysqli_fetch_array($req2))
            {
              echo "<option> $res[0] </option>";
            }
          ?> 
           </select>
         <label>Nom et Prénom</label>  </br>
         <input type="text" disabled id="propr"></br>
         <label>Photo</label>  </br></br>
         <input type="file" name="img" id="img"style="color:red;"></br></br>
         <input type="submit" value="Ajouter">
         <b><p class="fv" style="color:red" align="center"></p></b>
 </form>

答

You can use preventDefault to prevent submit of form. And use condition if validate returns true then use Ajax other case show alert

$("#form2").submit(function(e){
  e.preventDefault();
  if(validate()){

    var formData = new FormData($(this)[0]);
    $.ajax({
      url: "addv.php",
      type: 'POST',
      data: formData,
      success: function (data) {
        $('.fv').html(data).hide().fadeIn(500).delay(1000).fadeOut(500);
      },
      contentType: false,
      processData: false
    });     
  } else {
   alert('error');
  }
});

答

You can do something like this

$.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
        if(!validate()) //just an example
        {
            xhr.abort();
        }
    },
    complete: function(){
        console.log('DONE');
    }
});

You can check if your data is valid or not and based on it abort ajax request.

答

To answer your question, when I submit my forms via ajax I tend not to use submit button.

<input type="submit" value="Ajouter">

<input type="button" id="process_form" value="Ajouter">

then you can add some JS functions like

$('#process_form').click ( function (e) {
  if(validate){
    // AJAX HERE
  }else{
    // return errors
  }
});

That should get you moving in the right direction. In your case the form won't submit because you have not supplied a method nor an action. When using Ajax these aren't required though.

答

Try This

$("#userFrm input,#userFrm  select").each(function(index, value){
                if(value.checkValidity()==false){
                alert("error message");
                return false
            }
        });
// AJAX HERE

如何在ajax调用表单提交之前调用javascript验证函数

相关推荐