Develop Reference

jQuery validator is validating against no longer existing form elements after ajax call

I have a form which dynamically adds or removes input fields depending on certain selections which have been made by the user.
The basic form looks like this, simplified:
<form action="...some/path..." id="MyForm" method="post">
<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->
<select name="selectList">
<option>#1</option>
<option>#2</option>
<option>#3</option>
<option>...</option>
</select>
<div id="UpdateThisSection"></div>
<input type="submit" value="Submit">
</form>
Depending on which option the user picks from the select list, the user will be presented with different input fields, which are rendered in the #UpdateThisSection div.
The input fields for option #1 would be:
Date Field (required), so the required attribute is set to the input field, as well as the custom data-type="Date" attribute
Text (optional), no required attribute is set
The input fields for option #2 would be:
Text (optional), no required attribute set
Text (optional), no required attribute set
The input fields for option #3 would be:
Text (optional), no required attribute set
Numeric (optional), required attribute set, as well as the custom data-type="Numeric" attribute
The jquery validation is implemented like this:
$("#MyForm").validate();
$.validator.addMethod("usDate",
function (value, element) {
return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
},
"Please enter a valid date."
);
$("input[data-type='Date']").each(function () {
if ($(this).prop("required")) {
$(this).rules("add",
{
usDate: true
});
}
});
$("input[data-type='Numeric']").each(function () {
$(this).rules("add",
{
number: true
});
});
Validation works perfectly fine if I open the form and select any option. The form is being validated the way it should. However, if I change my mind and select a different option from the dropdown, the form is not validating correctly anymore. On submit, I see that the form is being validated with the previous form's requirements.
Looking at the $("#MyForm").validate() object on the console the invalid as well as the submitted property are still holding information of the previous form. What is the easiest way to reset the validator whenever a new ajax call load a new form element?
I tried to reset the form using $("#MyForm").validate().resetForm(); but it didn't clear the properties mentioned above.
Trying to clear the validation as suggested in this stackoverflow-post didn't resolve the issue for me either.

What is the easiest way to reset the validator whenever a new ajax call load a new form element?
In the Ajax success callback, remove all static rules from an element
$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...
Sorry... can't easilly recreate that for a demo.

how to set default values on load in jquery form?

I am using jq-idealforms to create form. Currently I am not using dynamic method to create any field. on certian event, I would like to set value in all the fields in the given form.
In other words, I want to preload the form with specific values on certain event. I am not able to find any such kind of documentation. So need help
Demo form : http://bit.ly/1ahZalu

I do not know if I understood well, but maybe this can help
http://jsfiddle.net/ymfvqyob/2/
var set=[]; //array name:field value, ...
set.push({'username':'test username 1','email':'test email 1'});
set.push({'username':'test username 2','email':'test email 2'});
//here is a click event used to call functions setVal
$('#set1').click(function(){
setVal(0)
})
$('#set2').click(function(){
setVal(1)
})
function setVal(ind)
{
$.each(set[ind],function(name,val){
$('form input[name="'+name+'"]').val(val);
})
}

In the HTML, just use the "value" attribute for text, and the "checked" attribute for radios and checkboxes:
<input type="text" value="John"/><br/>
<input type="checkbox" checked/>
As you can see, these automatically have specified values.
I hope this helps!

Conditional Required Fields validation is not working

I've got a new enigma for you to solve, because I can't manage to get this working.
Imagine yourself working for an online marketing company with a proprietary platform to host and manage campaigns. And then imagine only being able to validate required fields that 'just are there'. And at last; imagine a client that needs form fields to be required after a certain radio button is checked. Right? Right! Well.... no... not right.
Here is the thing. That same radio button triggers a jQuery script that eases in the 5 div's with form fields that are hidden display: block. I have the jQuery.validation.js plugin at the ready.
I insert this piece of code to the form fields that are required if it meets the condition that the depending field is checked:
class="textInput1 validate[condRequired[radiobuttonX]]"
textInput1 is a CSS class that styles an input field.
As a submitbutton I use an image which uses this code to submit: input type="image"
onclick="document.forms['formName'].submit();"
I have got:
$(document).ready(function() {
in place and in my head I have the link to the validation script:
<script src="../path/to/jquery.validationEngine.js"></script>
I use the: Inline Form Validation Engine 2.6.2, jQuery plugin
How do I make form field Y required when radiobuttonX is ticked? I definitely need syntax as well, because I'm a dumbs ;-)

If you can switch fromjQuery Validation Engine to jQuery-Validate, this would be the solution:
$("#form").validate({
rules: {
fieldY: {
required: {
depends: function() {
return $("#radioButtonX").is(":checked");
}
}
}
}
});

Issue with custom validation rule

I am using knockout.js plugin. I have created a custom validation rule named select for selectlist. I have created a jsfiddle :
http://jsfiddle.net/fQBxM/1/
My problem is when i load the page, the validation message is already shown, but i want to show it only when user submit the form. How can i do this ?

Add a default value '0' to your observable, then the validation won't fire for the initial value:
ko.observable('0').extend({ select: { message : "please select gender" } })
Demo JSfiddle.

jQuery Tools Validator: not required, but test if not empty

I'm using the Validator from jQuery Tools to validate my form (why jquery tools? because they are lightweight and use semantic HTML5 Tags, input-types and params for validation) but I have one problem:
I want to let jQuery Tools Validator test/validate a input-field only if it is not empty — but the field is not required.
On fields that have to be tested/validated, I can use required="required" and it validates … now I have a text-input-field where the user can input a URL, this field is not required BUT if the user adds some data into that field, the field should validate with pattern="https?://.+" to get sure the user is entering a valid url... if I add the pattern-parameter and no required-parameter, jQuery Tools Validator does test/validate nonetheless and I'm not able to submit the form until I entered a valid URL — even if I do not want to enter a URL at all!

You could try modifying your regex to allow the empty string, such as
pattern="^(?:|https?://.+)$"

Is there any reason you're tied to jquery tools validator? I've had great success with : http://bassistance.de/jquery-plugins/jquery-plugin-validation/
So for example I'd add a custom jQuery validator field:
jQuery.validator.addMethod("unittype", function(value, element) {
return jQuery('#fuel option:selected').val() in unitOptions && value in unitOptions[jQuery('#fuel option:selected').val()];
});
jQuery('#fuel').rules("add", {
fueltype:true,
messages:{
fueltype:"Please select a fuel type"
}
});
That was just an example from my code, just substitute the regex into the method.

If you specify your form field as
<input type='url'/>
then jQuery Tools Validator will require a valid url--you shouldn't need to roll your own url regex.
And if you don't mark that field required, then the validator should only check the field when it's non-empty; which, if I understood correctly, is the behavior you (OP) want.