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

时间:2016-02-07 12:29:42

标签: javascript php jquery ajax

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

Ajax代码:

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer,
    shouldRecognizeSimultaneouslyWithGestureRecognizer otherGestureRecognizer: UIGestureRecognizer) -> Bool
{
    return true
}

javascript函数:

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

表格:

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;
}

4 个答案:

答案 0 :(得分: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');
  }
});

答案 1 :(得分:0)

你可以做这样的事情

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

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

答案 2 :(得分:0)

要回答您的问题,当我通过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时,这些不是必需的。

答案 3 :(得分:0)

试试这个

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