jQuery Validate plugin
I am using the JS validate plugin to validate a form. However, I am validating only sections of the form at a time. I'm using a next and previous button to move through the form.
My first validation works but the second section does not. It sees it as valid and runs the next function. Any clues will be greatly appreciated
My first validation works but the second section does not. It sees it as valid and runs the next function. Any clues will be greatly appreciated
$(function() {
$.validator.setDefaults({
errorClass: 'form_error'
});
$('#business_info_next').click(function() {
var businessValidate = $("#sole-proprietor");
businessValidate.validate({
rules: {
trade_name_doing_business_as: {
required: true,
minlength:1,
maxlength: 256
},
address: {
required: true,
minlength: 1,
maxlength: 150
},
city: {
required: true,
minlength: 1,
maxlength: 36
},
state: {
required: true
},
zip_code: {
required: true,
number: true,
minlength: 5,
maxlength: 5
},
county: {
required: true,
maxlength: 36
},
phone_number: {
required: true,
phoneUS: true,
maxlength: 14
},
mailing_address: {
required: function() {
if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
return true;
} else {
return false;
}
},
minlength: 1,
maxlength: 150
},
mailing_city: {
required: function() {
if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
return true;
} else {
return false;
}
},
minlength: 1,
maxlength: 36
},
mailing_state: {
required: function() {
if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
return true;
} else {
return false;
}
},
minlength: 1,
maxlength: 36
},
mailing_zip: {
required: function() {
if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
return true;
} else {
return false;
}
},
minlength: 5,
maxlength: 5,
number: true
},
mailing_county: {
required: function() {
if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
return true;
} else {
return false;
}
},
minlength: 1,
maxlength: 36
},
},
messages: {
trade_name_doing_business_as: {
required: "Please enter the trade name or doing business as",
minlength: "",
maxlength: ""
},
address: {
required: "Please enter the address",
regex: "PO Boxes are not allowed"
},
city: {
required: "Please enter the city"
},
state: {
required: "Please enter the state"
},
zip_code: {
required: "Please enter the zipcode",
number: "Numbers only"
},
county: {
required: "Please enter the county"
},
phone_number: {
required: "Please enter the phone number"
},
mailing_address: {
required: "Please enter the mailing address"
},
mailing_city: {
required: "Please enter the mailing city"
},
mailing_state: {
required: "Please selec the mailing state"
},
mailing_zip: {
required: "Please enter the mailing zip code",
number: "Numbers only"
},
mailing_county: {
required: "Please enter the mailing county"
},
},
success: function(label) {
label.remove();
},
}).form();
if (businessValidate.valid() == true){
$(".personal-info-cont").hide('fast');
$(".business-info-cont").hide('fast');
$(".business-reasons-cont").show('fast');
}
});
});
Would you please verify how your HTML form is structured. It sounds like you have one form, with different areas, and you're validating one area at a time.
If that's the case, would you please post the related HTML for the area that is not working? The code you posted appears to be for the area with id = sole-proprietor. We need to see the HTML for that area.
If that's the case, would you please post the related HTML for the area that is not working? The code you posted appears to be for the area with id = sole-proprietor. We need to see the HTML for that area.
ASKER
The form ID is sole-proprietor. I'm trying to validate one section at a time as I move to the next section of the Form. The instructions for validate.js says you need to use the valid(); method but I can figure it out:
<form class="cart" method="post" id="sole-proprietor" enctype='multipart/form-data'>
<div class="wccpf-fields-group-1">
<div id="personal-info-cont">
<div id="personal_information" class="personal_information wcff-label wcff-label-info">PERSONAL INFORMATION</div>
<div class="suffix_text_wccpf_fields " id="suffix_text_wccpf_fields">
<div class="row">
<label for="suffix">Suffix </label>
</div>
<select class="suffix wccpf-field" name="suffix" id="suffix" wccpf-type="select" wccpf-pattern="mandatory" wccpf-mandatory="no" >
<option value="" >Select</option>
</select>
<span class="wccpf-validation-message wccpf-is-valid-1">This field can't be Empty</span>
</div>
<div id="first_name_text" class="first_name_text wccpf_fields_table ">
<div class="row"><label for="first_name">First Name <span>•</span> </label></div>
<div class="wccpf_value first_name">
<input type="text" class="wccpf-field first_name" name="first_name" id="first_name" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Enter your first name</span>
</div>
</div>
<div id="middle_name_text" class="middle_name_text wccpf_fields_table ">
<div class="row"><label for="middle_name">Middle Name </label></div>
<div class="wccpf_value middle_name">
<input type="text" class="wccpf-field middle_name" name="middle_name" id="middle_name" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Optional</span>
</div>
</div>
<div id="last_name_text" class="last_name_text wccpf_fields_table ">
<div class="row"><label for="last_name">Last Name <span>•</span> </label></div>
<div class="wccpf_value last_name">
<input type="text" class="wccpf-field last_name" name="last_name" id="last_name" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Enter you Last name</span>
</div>
</div>
<div id="title_text" class="title_text wccpf_fields_table ">
<div class="row"><label for="title">Title <span>•</span> </label></div>
<div class="wccpf_value title">
<input type="text" class="wccpf-field title" name="title" id="title" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Enter Your Title</span>
</div>
</div>
<div id="social_security_number_text" class="social_security_number_text wccpf_fields_table ">
<div class="row"><label for="social_security_number">Social Security Number <span>•</span> </label></div>
<div class="wccpf_value social_security_number">
<input type="text" class="wccpf-field social_security_number" name="social_security_number" id="social_security_number" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">This field can't be Empty</span>
</div>
</div>
<div id="verify_social_security_number_text" class="verify_social_security_number_text wccpf_fields_table ">
<div class="row"><label for="verify_social_security_number">Verify Social Security Number <span>•</span> </label></div>
<div class="wccpf_value verify_social_security_number">
<input type="text" class="wccpf-field verify_social_security_number" name="verify_social_security_number" id="verify_social_security_number" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">This field can't be Empty</span>
</div>
</div>
<div id="email_text" class="email_text wccpf_fields_table ">
<div class="row">
<label for="email">Email <span>•</span> </label>
</div>
<input id="email" type="email" class="wccpf-field" name="email" placeholder="" wccpf-type="email" wccpf-pattern="email" wccpf-mandatory="no" value="" />
<span class="wccpf-validation-message wccpf-is-valid-1">Enter Your Email Address</span>
</div>
<div class="personal-info-button-cont"><button id="personal_info_next" type="button">NEXT</button></div>
</div>
<div id="business-info-cont">
<div id="business_information_no_po_boxes" class="business_information_no_po_boxes wcff-label wcff-label-info">BUSINESS INFORMATION (NO PO BOXES):</div>
<div id="trade_name_doing_business_as_text" class="trade_name_doing_business_as_text wccpf_fields_table ">
<div class="row"><label for="trade_name_doing_business_as">Trade Name / Doing Business As <span>•</span> </label></div>
<div class="wccpf_value trade_name_doing_business_as">
<input type="text" class="wccpf-field trade_name_doing_business_as" name="trade_name_doing_business_as" id="trade_name_doing_business_as" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Optional</span>
</div>
</div>
<div id="address_text" class="address_text wccpf_fields_table ">
<div class="row"><label for="address">Address <span>•</span> </label></div>
<div class="wccpf_value address">
<input type="text" class="wccpf-field address" name="address" id="address" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Enter you address</span>
</div>
</div>
<div id="city_text" class="city_text wccpf_fields_table ">
<div class="row"><label for="city">City <span>•</span> </label></div>
<div class="wccpf_value city">
<input type="text" class="wccpf-field city" name="city" id="city" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Enter city</span>
</div>
</div>
<div class="state_text_wccpf_fields " id="state_text_wccpf_fields">
<div class="row">
<label for="state">State <span>•</span> </label>
</div>
<select class="state wccpf-field" name="state" id="state" wccpf-type="select" wccpf-pattern="mandatory" wccpf-mandatory="no" >
<option value="" >Select</option>
</select>
<span class="wccpf-validation-message wccpf-is-valid-1">Choose you state</span>
</div>
<div id="zip_code_text" class="zip_code_text wccpf_fields_table ">
<div class="row"><label for="zip_code">Zip Code <span>•</span> </label></div>
<div class="wccpf_value zip_code">
<input type="text" class="wccpf-field zip_code" name="zip_code" id="zip_code" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">This field can't be Empty</span>
</div>
</div>
<div id="county_text" class="county_text wccpf_fields_table ">
<div class="row"><label for="county">County <span>•</span> </label></div>
<div class="wccpf_value county">
<input type="text" class="wccpf-field county" name="county" id="county" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">Entry your county</span>
</div>
</div>
<div id="phone_number_text" class="phone_number_text wccpf_fields_table ">
<div class="row"><label for="phone_number">Phone Number <span>•</span> </label></div>
<div class="wccpf_value phone_number">
<input type="text" class="wccpf-field phone_number" name="phone_number" id="phone_number" value="" placeholder="" maxlength="" wccpf-type="text" wccpf-pattern="mandatory" wccpf-mandatory="no" />
<span class="wccpf-validation-message wccpf-is-valid-1">This field can't be Empty</span>
</div>
</div>
<div class="business-info-button-cont"><button id="business_info_previous" type="button">PREVIOUS</button><button id="business_info_next" type="button">NEXT</button></div>
</div>
<input type="submit">
</form>
you are missing a div at the end
maybe it fixes...
</div> >>>> this one is missing
<input type="submit">
</form>maybe it fixes...
also, what plugin are you using?
I found it I guess...
in case, somebody is interested, they can use this demo as testing environment...
https://jsfiddle.net/HainKurt/hn4ppdvL/
in case, somebody is interested, they can use this demo as testing environment...
https://jsfiddle.net/HainKurt/hn4ppdvL/
ASKER
Plugin? jQuery Validate, The title of this question. I don't think you understand the question. Validate.js seems to allow only one use of the .validation method. I need to run it many times on the same form. Does anyone have a clue on how to do this? The docs say to use the valid() method but does not give a suitable answer.
So, you can't initialize Validate more than once. You can, however, add and remove rules, which is what you'll need to do in your case.
https://jqueryvalidation.org/rules/
One way to approach this would be to remove all rules when you're about to validate a section, and then add in the rules for that particular section.
https://jqueryvalidation.org/rules/
One way to approach this would be to remove all rules when you're about to validate a section, and then add in the rules for that particular section.
Plugin? jQuery Validate, The title of this question. I don't think you understand the question. Validate.js seems to allow only one use of the .validation method
there are hundreds of validation plugins around...
here are some...
20 jQuery Validation Plugins
http://jqueryhouse.com/jquery-validation-plugins/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Glad you were able to find a solution. It uses the same principle I mentioned in my last comment, where you add rules. I guess it makes sense to just add new rules (and not first remove existing rules), since you want the validation to continue on the fields in previous sections.
ASKER
I found the answer here
https://djaodjin.com/blog/jquery-multi-step-validation.blog.html
https://djaodjin.com/blog/jquery-multi-step-validation.blog.html
also, please post the form html or just create a jsfiddle.net demo