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

Posted 2023-05-09

【中文标题】如何在 ajax 调用中提交表单之前调用 javascript 验证函数

【英文标题】：How to call javascript validate function before form submit on an ajax call

【发布时间】：2016-05-17 03:51:35

【问题描述】：

这是我的 validate() 函数，返回 true 或 false。 我的问题是我只想在 validate() 返回 true 时调用 ajax 提交表单代码，否则它将显示带有无效数据错误消息的警报并留在页面中 不提交表单，不使用 ajax 我知道我可以使用if true return document.form2.submit();但在我的情况下它不起作用，请帮助！

Ajax 代码：

$("#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 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 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>

【问题讨论】：

只是一个建议，随心所欲，但我注意到你在这里使用 jquery，我发现这个验证库 jqueryvalidation.org> 是一个很棒的工具。

【参考方案1】：

您可以使用preventDefault 来阻止提交表单。如果 validate 返回 true 则使用条件，然后使用 Ajax 其他情况显示警报

$("#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');
  
);

【讨论】：

效果很好！非常感谢 :) 只是有一个注释我无法理解，我删除了 alert('error') 代码现在是：else 并且没有调用 validate();出现消息错误，知道 else 块不包含任何内容！

validate函数里面有两个alert。

validate 函数可以返回错误消息，或者消息数组而不是布尔值，如果它是空的，你可以创建 Ajax 请求，但如果不显示它们。

另外看看表单验证属性，它也为用户友好的表单验证提供了很好的解决方案。 developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/…

太棒了！非常感谢您，祝您有美好的一天:)

【参考方案2】：

你可以这样做

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

您可以检查您的数据是否有效，并根据它中止 ajax 请求。

【参考方案3】：

为了回答您的问题，当我通过 ajax 提交表单时，我倾向于不使用提交按钮。

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

到

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

然后你可以添加一些JS函数，如

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

这应该会让你朝着正确的方向前进。在您的情况下，表单不会提交，因为您没有提供方法或操作。但在使用 Ajax 时，这些不是必需的。

【参考方案4】：

试试这个

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