web-dev-qa-db-ja.com

送信ハンドラーを使用したjQuery検証

JQuery検証プラグインのvalidateメソッドを使用してフォーム検証をセットアップし、入力要素の値を変更する送信ハンドラーがあります（YUIエディターを使用しており、iframeのコンテンツをtextarea要素にコピーするにはsaveHTML（）呼び出しが必要です）。フォームを送信するとき、送信ハンドラーを実行した後、バリデーターがフォームを検証するようにします。しかし、validate呼び出しの後に登録されている場合、送信ハンドラーは実行されません。

例えば、

<form id="form1" action="/test">
    <input type="text" name="txt1" id="txt1" />
    <input type="submit" value="submit" />

$(document).ready(function() {
    $("#form1").submit(function() {
        $("#txt1").val("123456");
    });

    $("#form1").validate({
        rules: {
            txt1: {
                maxlength: 5
            }
        }
    });
});

フォームは送信ハンドラーの後で検証されるため、送信はキャンセルされます。

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            txt1: {
                maxlength: 5
            }
        }
    });

    $("#form1").submit(function() {
        $("#txt1").val("123456");
    });
});

ただし、順序を変更すると、送信ハンドラの前にフォームが検証されます。

jqueryjquery-validate
11
James

beforeSubmit コールバックを使用して値を設定できます。

$(function() {
    $('#form1').validate({
        rules: {
            txt1: { maxlength: 5 }
        },
        beforeSubmit: function(arr, $form, options) {
            $('#txt1').val('123456');
            return true;
        }
    });
});
8
Darin Dimitrov

試す

$(document).ready(function() {
    $("#form1").submit(function() {
        $("#txt1").val("123456");

        $("#form1").validate({
            rules: {
                    txt1: {
                            maxlength: 5
                    }
            }
        });
    });
});

このようにして、検証は送信イベントハンドラーによってトリガーされます。

2
RaYell
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jquery-3.1.1.min.js"></script>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  
<style type="text/css">
p1{
    color:orange;
}
p2{
    color:green;
}

 

body{
                
                }
        
            #form label{
                font:bold 11px arial;
                color: #565656;
                padding-left: 1px;
            }
            #form label.mandat{color:red;}
            #form input[type="text"]{
                height: 30px;
                margin-bottom: 8px;
                padding: 5px;
                font: 12px arial;
                color: olive;
            }
            #form textarea{
                width: 340px;
                height: 80px;
                resize: none;
                margin: 0 0 8px 1px;
                padding: 5px;
                font: 12px arial;
                color: yellow;
            }
            #form img{
                margin-bottom: 8px;
            }
            #form input[type="submit"]{
                background-color: #0064aa;
                border: none;
                color: #fff;
                padding: 5px 8px;
                cursor: pointer;
                font:bold 12px arial;
            }
            .error{
                border: 1px solid olive;
            }
            .cap_status{
                width: 350px;
                padding: 10px;
                font: 14px arial;
                color: #fff;
                background-color: #10853f;
                display: none;
            }
            .cap_status_error{
                background-color: #bd0808;                
            }


</style>
  
  <script>
  
   $.validator.addMethod("error1", function(value, element, error) {          
    return error.test(value);
});

   $.validator.addMethod("error2", function(value, element, error) {          
    return error.test(value);
});

 $.validator.addMethod("error3", function(value, element, error) {          
    return error.test(value);
}); 
$.validator.addMethod("error4", function(value, element, error) {
   return error.test(value);
});

    $.validator.addMethod("error5", function(value, element, error) {          
    return error.test(value);
}); 
  
$.validator.addMethod("error6", function(value, element, error) {          
    return error.test(value);
});

$.validator.addMethod("error7", function(value, element, error) {          
    return error.test(value);
});
$.validator.addMethod("error8", function(value, element, error) {          
    return error.test(value);
} );






  $(function() {
  
  
    $("#register-form").validate({
    
       
        rules: {
           
               firstname: {
                required: true,
                error1: /^[A-Za-z']+( [A-Za-z']+)*$/
                
            },
            lastname: {
                required: true,
                error2: /^[A-Za-z']+( [A-Za-z']+)*$/
              
            },
                address: {
                required: true,
                error3: /^[0-9,./\-_ a-zA-Z''\s a-zA-Z0-9]+$/
                
            },
            pincode: {
                required: true,
                error4: /^[1-9][0-9]{5}$/
                
            },


             city:  {
                required: true
            },


            dob:  {
                required: true
            },
            
           

            
              mobileno: {
                required: true,
                error5: /[7|8|9][0-9]{9}/,
                maxlength: 10
            },
            emailid: {
                required: true,
                error6: /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)+$/
                
            },

            
            
            password: {
                required: true,
                error7: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,16}$/
              
            },
            cpassword: {
                required: true,
                error8: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,16}$/,
               equalTo: "#password"
               
            },
           
       
        
        


        },

        messages: {


          firstname: {
                required: "<p1>Please enter your first name</p1>",
               
                error1: "<p2>name must be content alphabet</p2>"
            }, 
            lastname: {
                required: "<p1>Please enter your last name</p1>",
                
                error2: "<p2>name must be content only alphabet</p2>"
            }, 




            address: {
                required: "<p1>Please enter address</p1>",
                
                error3: "<p2>name must be content alphabet with no</p2>"
            },   


            pincode: {
                required: "<p1>Please enter pincode</p1>",
                
                error4: "<p2>6 digit number only require</p2>"
            },

             city: {
            required: "<p1>Please choose city</p1>"
        },


          dob: {
            required: "<p1>Please enter date of birth</p1>"
        },


            mobileno: {
                required: "<p1>require contact no</p1>",
                
                error5: "<p2>no start with 7,8,9 with 10 digit</p2> "
            },



            emailid: {
                required: "<p1>require email </p1>",
                
                error6: "<p2>please enter email with @ and . </p2> "
            },




            password: {
                required: "<p1>Please provide a password",
                error7: "<p2> password require at least lower,upper,numeric,alphabet,special character</p2>"
            },
             cpassword: {
                required: "<p1>Please provide a password</p1>",
               error8: "<p2>password require at least lower,upper,numeric,alphabet,special character</p2>",
               equalTo: "<p1>Password not match</p1>"
            }, 

            
            
           
            

        },
        
        submitHandler: function(form) {
            form.submit();
        }
    });

  });
  
  </script>
  

</head>
<body>

 <div style='margin:0 auto'>

<form name= "" id="register-form" action="loginformjq.php"  method="post">
<div id="form">
<table  border="1" padding="2" cellpadding="2" width="20%" bgcolor="lightblue" align="center" cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><p style="color: purple"><Marquee direction="left" behavior="alternate" style="border:solid olive">Student Registration Form</Marquee></p></font></center>
</td>
</tr>

<tr>
<td><p style="color: yellow">Firstname</p></td>
<td><p class="error"><input type="text" name="firstname" id="firstname" size="20" value=""></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">Lastname</p></td>
<td><p class="error"><input type="text" name="lastname" id="lastname" size="20" value=""></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">Address</p></td>
<td><p class="error"><input type="text" name="address" id="address" size="20"></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">Pincode</p></td>
<td><p class="error"><input type="text" name="pincode" id="pincode" size="20"></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">City</td>
<td><select name="city">
<p1><option value="" selected>select city</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></p1>
</td>
</tr>





<tr>
<td><p style="color: yellow">DOB</p></td>
<td><p class="error"><input type="date" name="dob" id="dob" size="20"></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">MobileNo</p></td>
<td><p class="error"><input type="text" name="mobileno" id="mobileno" size="20"></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">EmailId</p></td>
<td><p class="error"><input type="text" name="emailid" id="emailid" size="20"></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">password</p></td>
<td><p class="error"><input type="password" id="password" name="password" size="20"></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">cpassword</p></td>
<td><p class="error"><input type="password" id="cpassword" name="cpassword" size="20"></p>
</td>
</tr>
                  

<tr>
<p style="color: yellow"></p>
<td colspan="1"><input type="submit" value="submit"></td>

</tr>
</table>
</div>
</form>
  

        </div>
</body>
</html>
0
vijay panchal

あなたはこれを単に使うことができます：

var validForm = false;

SubmittingForm = function () 
{    
     //Validate Statements...
     validForm = true;
     $("#form1").submit();
}

$(document).ready(function () {
$("#form1").validate({
            submitHandler: function (form) {
                if (validForm)
                    $("#form1").submit();
                else
                    SubmittingForm();
            },
            rules: ...
}
0
iTachi

$("form").validate().resetForm();を使用する必要があります

0
Jesús Ascama