Question

我试图找到一种方法来使用Jquery进行表单验证。我目前验证功能有问题。我能够在输入字段中没有任何内容的情况下发送表单。你能否告诉我如何使它发挥作用。

＆＃13;

 function Valid(){
    var name1 = false;
    var name2 = false;
    var num = false;
    var mail = false;
    var msg = false;
   
     if (document.myForm.name.value ==="") {
          $('#name1').addClass('has-error');
          $( "#name2" ).click(function(){$("#name1").removeClass('has-error');});
          name1 = false;}
        
     if (!/^[a-zA-Z]*$/g.test(document.myForm.name.value)) {
          $('#name1').addClass('has-error');
          $('#name2').click(function(){$('#name1').removeClass('has-error');});
          name2 = false;}
    
    if (document.myForm.num.value.length < 17){
          $('#num1').addClass('has-error');
          $( "#num2" ).click(function(){$("#num1").removeClass('has-error');});
          num = false;}
    
    if (document.myForm.email.value === "") {
          $('#email1').addClass('has-error');
          $( "#email2" ).click(function(){$("#email1").removeClass('has-error');});
           mail = false;}
    
    if (document.myForm.message.value === "") {
          $('#msg1').addClass('has-error');
          $( "#msg2" ).click(function(){$("#msg1").removeClass('has-error');});
           msg = false;} 
  }// END VALIDATION
  
  
   function SubmitFunction(){
          if(Valid()){
          $.ajax({
              type: "POST",
              url:"../php/process.php",
              data: $('form.contact').serialize(),
              success: function(msg){
                $("#myModal").modal('hide');
                $("#msgsuccess").delay(500).fadeIn(500).delay(1000).fadeOut(500);
                }    
          });//End 
         }
        }//End SubmitFunction

＆＃13;

提前谢谢!!

Answer 1

将return false;添加到您的所有if语句中，并使用底部的return true;。

此外，始终执行两次验证，服务器端和客户端。客户端不是nessecary，但 serverside是。

编辑另外，请注意，每次返回后，您的功能都会停止工作。因此，如果输入1和4没有填写，它将在输入1处返回false，并且在下次提交输入4并输入1被填写之前不会检查输入4.

编辑1：通过这种方式可以消除这些：

 function Valid() {
         var name1 = false;
         var name2 = false;
         var num = false;
         var mail = false;
         var msg = false;
         var error = false;

         if (document.myForm.name.value === "") {
             $('#name1').addClass('has-error');
             $("#name2").click(function() {
                 $("#name1").removeClass('has-error');
             });
             name1 = false;
             error = true;
         }
         if (!/^[a-zA-Z]*$/g.test(document.myForm.name.value)) {
             $('#name1').addClass('has-error');
             $('#name2').click(function() {
                 $('#name1').removeClass('has-error');
             });
             name2 = false;
             error = true;
         }
         if (document.myForm.num.value.length < 17) {
             $('#num1').addClass('has-error');
             $("#num2").click(function() {
                 $("#num1").removeClass('has-error');
             });
             num = false;
             error = true;
         }
         if (document.myForm.email.value === "") {
             $('#email1').addClass('has-error');
             $("#email2").click(function() {
                 $("#email1").removeClass('has-error');
             });
             mail = false;
             error = true;
         }
         if (document.myForm.message.value === "") {
             $('#msg1').addClass('has-error');
             $("#msg2").click(function() {
                 $("#msg1").removeClass('has-error');
             });
             msg = false;
             error = true;
         }
         if(error === true) {
             return true;
         } else {
             return false;
         }
     } // END VALIDATION

 function SubmitFunction() {
         if (Valid()) {
             $.ajax({
                 type: "POST",
                 url: "../php/process.php",
                 data: $('form.contact').serialize(),
                 success: function(msg) {
                     $("#myModal").modal('hide');
                     $("#msgsuccess").delay(500).fadeIn(500).delay(
                         1000).fadeOut(500);
                 }
             }); //End 
         }
     } //End SubmitFunction

这样做，它在函数初始化时将error变量设置为false，但每次出现错误时，都会将其设置为true。在函数结束时，只需检查错误变量是否为真，如果不是，则返回false，如果是，则返回true。

Jquery＆amp; Ajax表单验证函数

1 个答案: