Dev Faq
11
votes

Validation de jQuery avec gestionnaire de soumission

I Configurez la validation de formulaire à l'aide de la méthode de validation de la validation de JQuery Validation et j'ai un gestionnaire de soumission qui modifie la valeur de l'élément d'entrée (J'utilise l'éditeur YUI et il a besoin de sauvegarde de sauvegarde, appelez le contenu de l'iframe à l'élément Texarea. ). Lors de la soumission du formulaire, je souhaite que le validateur valide le formulaire après avoir exécuté mon gestionnaire de soumission. Mais cela n'exécute pas mon gestionnaire de soumission s'il est enregistré après l'appel de validation.

Par exemple, P> 

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

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

1 commentaires

Ce n'est pas vraiment une question. Je suppose que la méthode de validation renvoie FALSE pour annuler les fonctions liées restantes Onsubmit. Si vous remettez faux; Après votre modification à # TXT1, je suis sûr que la fonction de validation ne sera pas appelée.

5 Réponses :

2
votes

ESSAYEZ 

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

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

1 commentaires

La méthode .validate () est uniquement utilisée pour initialiser le plugin, il n'appartient donc pas à l'intérieur d'un Soumettre Hangler. Tous les événements de déclenchement comprenant Soumettre sont automatiquement capturés par le plugin. Veuillez vous reporter à DOCS et Page Wiki pour une utilisation correcte.

8
votes

Vous pouvez utiliser le avant code> rappel pour définir Valeurs: 

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

1 commentaires

C'est une méthode de forme jQuery. Comment se lie-t-il dans JQuery Validate?

0
votes

Vous devez utiliser $ ("formulaire"). Valider (). réinitialiser ();

1 commentaires

Pas utile parce que trop terres. Où? Pourquoi?

0
votes

Vous pouvez simplement utiliser ceci: 

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 commentaires
0
votes 

<!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>

1 commentaires

VOUS VOULEZ VOUS VOULEZ LIVE SHOW ERROR U UTILISEZ-VOUS UTILISER À AVANT ENKEKEE, BLUR SET est VRAI ENCOWUP: True, Règles: {FirstName: {Requis: TRUE, ERROR1: / ^ [A-ZA-Z '] + ([A-ZA- z '] +) * $ /},

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier