CODEWITHSUNDEEP
jqueryjquery-validate
user3122063
user3122063

Reputation: 33

jQuery validation, append an addition field to validate on div click

I want to add an additional field to validate when user click on a specific div or text. Here is the scenario, I have a form that is validated using jQuery validation, there are two fields that I did not include for validation, for the purpose of I want this two field to be validated when the user click on "Change Password?" text. How could I add and additional field to validate during runtime?

<span class="change-password">Change Password</span>

$(document).ready(function() {
 $("#update_user").validate({

        rules: {
          "admin_account[name]": {
            required: true
          },
          "admin_account[email]": {
            required: true
          },
          "admin_account[gender]":{
            required: true
          },
          "admin_account[nationality]":{
            required: true
          },
          "admin_account[photo]":{
            accept: false
          },
          "admin_account[date_of_birth(1i)]":{
            required: true
          },
          "admin_account[date_of_birth(2i)]":{
            required: true
          },
          "admin_account[date_of_birth(3i)]":{
            required: true
          }
        },
        errorPlacement: function(){
            return false;  // suppresses error message text
        }

      });

//I want to trigger here an additional validation for the password field
$(".change-password").on("click", function(){
    $("#update_user").validate({

        rules: {
          "admin_account[name]": {
            required: true
          },
          "admin_account[email]": {
            required: true
          },
          "admin_account[password]":{
            required: true
          },
          "admin_account[password_confirmation]":{
            required: true,
            equalTo:"#edit_registerPassword"
          },
          "admin_account[gender]":{
            required: true
          },
          "admin_account[nationality]":{
            required: true
          },
          "admin_account[photo]":{
            accept: false
          },
          "admin_account[date_of_birth(1i)]":{
            required: true
          },
          "admin_account[date_of_birth(2i)]":{
            required: true
          },
          "admin_account[date_of_birth(3i)]":{
            required: true
          }
        },
        errorPlacement: function(){
            return false;  // suppresses error message text
        }

      });
});

Upvotes: 1

Views: 515

Answers (1)

Ram
Ram

Reputation: 144699

jQuery validation has an ignore property which excludes the specified elements from validation process. By default it's value is set to :hidden and it exactly does what you want, i.e. it excludes the hidden elements. Just define the rules in the first validate call and remove the second validate function.

Upvotes: 1

Related Questions