jQuery的表单验证阿贾克斯之前提交

Question

的JavaScript位：

$(document).ready(function() 
    { 
      $('#form').submit(function(e) 
      {  

       e.preventDefault(); 
       var $form = $(this); 

       // check if the input is valid 
       if(! $form.valid()) return false; 
        $.ajax(
        { 
        type:'POST', 
        url:'add.php', 
        data:$('#form').serialize(), 
        success:function(response) 
        { 
         $("#answers").html(response); 
        } 
       });  

      }) 
    }); 

HTML位：

<input type="text" name="answer[1]" class="required" /> 
    <input type="text" name="answer[2]" class="required" /> 

所以这是我想使用的代码。这个想法是在我使用Ajax发送表单之前让所有输入得到验证。我已经尝试了很多版本，但每次我最终都会提交，即使表单没有完全填写。我所有的输入都是“必需”类。任何人都可以看到我做错了什么？

另外，我依赖于基于类的需求，因为我的输入名称是用php生成的，所以我永远无法确定我得到的是什么名称[id]或输入类型。

我在“页面”中显示/隐藏问题。

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/> 

JS：

function toggleVisibility(newSection) 
     { 
      $(".section").not("#" + newSection).hide(); 
      $("#" + newSection).show(); 
     } 

Answer 1

你可以使用submitHandler选项。基本上把$.ajax调用放在这个处理程序中，即用验证设置逻辑反转它。

$('#form').validate({ 

    ... your validation rules come here, 

    submitHandler: function(form) { 
     $.ajax({ 
      url: form.action, 
      type: form.method, 
      data: $(form).serialize(), 
      success: function(response) { 
       $('#answers').html(response); 
      }    
     }); 
    } 
}); 

的jQuery.validate插件将调用如果验证通过了提交处理。

Answer 2

你可以尝试做：

if($("#form").validate()) { 
return true; 
} else { 
return false; 
} 

Answer 3

我觉得我第一次验证表单，如果验证总会过去的，比我会让阿贾克斯后。不要忘记在脚本的末尾添加“return false”。

Answer 4

首先，您不需要明确添加classRules，因为required会被jquery.validate插件自动检测到。 所以你可以使用此代码：

1. 的形式提交，可以防止默认行为
2. 如果窗体是无效的停止执行。

3. 否则如果有效发送ajax请求。

   $('#form').submit( function(e){  
   
         e.preventDefault(); 
         var $form = $(this); 
   
         // check if the input is valid 
         if(! $form.valid()) return false; 
   
         $.ajax({ 
          type: 'POST', 
          url: 'add.php', 
          data: $('#form').serialize(), 
          success: function(response) { 
           $("#answers").html(response); 
          } 
   
         }); 
        }); 
   

Answer 5

这个具体的例子将只检查输入，但不过你可以调整它，添加这样的事情你阿贾克斯功能：

beforeSend: function() {      
    $empty = $('form#yourForm').find("input").filter(function() { 
     return this.value === ""; 
    }); 
    if($empty.length) { 
     alert('You must fill out all fields in order to submit a change'); 
     return false; 
    }else{ 
     return true; 
    }; 
}, 

Answer 6

我觉得submitHandler与jQuery验证是好的解。请从这段代码中了解一下。从@Darin季米特洛夫启发

$('.calculate').validate({ 

       submitHandler: function(form) { 
        $.ajax({ 
         url: 'response.php', 
         type: 'POST', 
         data: $(form).serialize(), 
         success: function(response) { 
          $('#'+form.id+' .ht-response-data').html(response); 
         }    
        }); 
       } 
      }); 

Answer 7

> Required JS for jquery form validation 
> ## jquery-1.7.1.min.js ## 
> ## jquery.validate.min.js ## 
> ## jquery.form.js ## 

$("form#data").validate({ 
    rules: { 
     first: { 
       required: true, 
      }, 
     middle: { 
      required: true, 
     },   
     image: { 
      required: true, 
     }, 
    }, 
    messages: { 
     first: { 
       required: "Please enter first", 
      }, 
     middle: { 
      required: "Please enter middle", 
     },   
     image: { 
      required: "Please Select logo", 
     }, 
    }, 
    submitHandler: function(form) { 
     var formData = new FormData($("#image")[0]); 
     $(form).ajaxSubmit({ 
      url:"action.php", 
      type:"post", 
      success: function(data,status){ 
       alert(data); 
      } 
     }); 
    } 
}); 

Answer 8

形式本地JavaScript checkValidity功能更多的则是足以引发HTML5验证

$(document).ready(function() { 
    $('#urlSubmit').click(function() { 
     if($('#urlForm')[0].checkValidity()) { 
      alert("form submitting"); 
     } 
    }); 
});