My question seems to be the same as javascript validation for dynamic element , however the answers presented there do not appear to be working for me. I am using the query.validate plugin, and it works fine for most of my form. However, I have a button to add a row to a table containing several input elements. The code I am using to add the form input elements is the following:
var table=document.getElementById('flightlegs');
var rowCount=table.rows.length-1;
var row=table.insertRow(rowCount);
...
var cell4=row.insertCell(3);
var element4=document.createElement("input");
element4.type="text";
element4.size="3";
element4.setAttribute("required", "required");
element4.maxlength="3";
element4.name="legto";
element4.id="legto"+rowCount;
cell4.appendChild(element4);
$('#legto'+rowCount).rules('add', {required:true});
...(more of the same for other cells)...
Ok, so this may not be the best way (i'm new at javascript), but it does add the input fields as desired. However, when hitting submit, those new fields are not included in the validation. What am I missing here?
jquery.validate "selects only the first element for each name and only those with rules specified" (take a look at the source code of the plugin, the function called elements defined around line# 450).
In your case, each newly added form element has the name legto, which would cause jquery.validate to select only the first form element with that name and discard the rest wrt form validation.
Here's how you can fix this
element4.name="legto"+rowCount;
Related
I am using jquery validate plugin to validate form fields . I am also using jqtree . on click of every child node a section of form is visible to user, which is supposed to be filled with values.For every child there is a form content to be filled. Entire tree content is declared within one form only. I have a button in the form which on click generates json file. I am calling the function below to validate form
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified. But can anyone tell me what has gone wrong in my approach?
The .validate() method does not "validate the form". It only initializes the plugin on the form. .valid() will programmatically trigger a validation test.
Your code:
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
$("myform") - Is that supposed to be an id, class, or name? As you've written it, it's looking for a <myform></myform> element.
$("#myform") // id="myform"
$(".myform") // class="myform"
$("[name='myform']") // name="myform"
Is your form element called myform or my-form? If it's the same <form> element, then the two jQuery selectors would be the same.
$("#my-form) is missing the closing quotation mark.
If the id of the <form> element is "myform", then your code should be...
$("#myform").validate(); // <- initialize the plugin
....
if ($("#myform").valid()) { // <- test the form's validity
// generate the json file
....
}
OP Title: jquery validate plugin, validating form fields of only current screen
Your question does not seem to have anything to do with the title. There is only one form described in your OP, and since this is JavaScript, only the page that's loaded in the browser is relevant. Not sure what you mean by "current screen".
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified.
By default, the plugin will not validate any form fields that are hidden. You would manipulate the ignore option to over-ride this behavior. Setting ignore to [] will tell the plugin to ignore nothing and validate all fields including the hidden ones.
I have a form which I am using Parsley.js to validate. Everything works like a charm. Except, there is a part of the form where users are allowed to add new fields:
addFieldsToContainer = function($fields, $container) {
$fields.clone(true).removeClass('empty-form').appendTo($container);
if (typeof(Parsley) !== 'undefined'){
$('form.form-horizontal').parsley().destroy();
addValidatorsListeners();
}
};
My validations are a little complicated, because there are sections, and in each section, the inputs must all add up to a total number, which is the value of another input. I've got the inputs triggered to blur, and if any of the inputs are entered and the total for the section is wrong, all the inputs for the section are given the parsley-error class, and vice versa. Now, on the new input that is being added to the DOM, the parsley ui is not working on it, i.e. the parsley-success/error classes are not being added to it. But the rest of the section still works fine, and even includes whatever number is in the input in the total calculation. I'm also seeing these two errors in the dev console:
Uncaught TypeError: Cannot set property 'validatedOnce' of undefined parsley.min.js:8
Uncaught TypeError: Cannot read property '$errorsWrapper' of undefined
My code here.
How can I correctly bind these new inputs to the parsley validator?
Edit:
So I just realized that the when the user clicks the add input button, all of the inputs that have parsley:success/error classes have them all removed (because of model_form.parsley().destroy() I assume?) except for the new input that has been added. This input class never changes with the rest of the section, as I've pointed out. Also, the total enrollment input doesn't change, I'm guessing because of the { excluded: '[data-parsley-sum-total="all"]' } line. So it looks like the input that is being cloned from the page isn't having it's binding destroyed or it's validators correctly added, so some sort of event handling problem?
Maybe related?
If you clone Parsley's elements with their data, yeah, Parsley will be confused as hell.
I'd simply recommend not doing that. More precisely, clone without the data and events, or else clone before binding with parlsey.
If you really have to go this way, you might be able to get away with cloning afterwards if you $yourClone.removeData('Parsley'). I haven't tested it and can't guarantee that even if it works now it would in the future.
The jQuery validation engine plugin has the ability to do ajax validation; which works gret except for one small catch...
It sends off the field ID instead of the field name to be validated.
Why is this an issue?
I have a simple item that to create it only requires one textbox to be filled out; so we have this as a modal on every page for managing said item.
We use the jQuery validation engine plugin to validate that the entered value is unique.
Now this also means that the modal shows up on the edit page. Which obviously has the title in a field as well for you to edit.
And we want this field to be validated as well but because the validation engine sends across the field ID instead of the field name we must give the two fields different ID's
e.g. createtitle and edittitle and then on the backend have
if($fieldId == 'createtitle' || $fieldId == 'edittitle'){$fieldId = $fieldId}
Which really is an ugly approach; is there any way to get it to use the name; or another attribute instead?
Maybe this plugin could help you. It uses class names of your element to validate.
I’m using Sys.Mvc to count errors and I have added my own custom validations by jQuery.
var validationErrors = Sys.Mvc.FormContext.getValidationForForm(this).validate('submit');
var errorsCount = validationErrors.length;
And also I have some fields, which will by hide (by using jQuery .hide();)
Question: How I can remove errors from Sys.Mvc.FormContext if the required element is hidden and add the error if the element is appearing again?
OR
How I can ignore hidden elements validation errors?
Best regards Paul.
Try to initialize the field even if it is hidden (using jQuery), and insert a temporary value. after submitting the form - you can insert the right value into the hidden fields (in the controller).
Something like this:
$("#myField").hide();
$("#myField").val("temporaryValidValue");
I would like to clear all inputs,
selects and also all hidden fields in a form.
Using jQuery is an option if best suited.
What is the easiest way to do this... I mean easy to understand and maintain.
[EDIT]
The solution must not mess with check-boxes (the value must remain, but checked state must be cleared), nor the submit button.
What I am trying to do is a clear button, that clears all the options entered by the user explicitly, plus hidden-fields.
Thanks!
You can use the reset() method:
$('#myform')[0].reset();
or without jQuery:
document.getElementById('myform').reset();
where myform is the id of the form containing the elements you want to be cleared.
You could also use the :input selector if the fields are not inside a form:
$(':input').val('');
To clear all inputs, including hidden fields, using JQuery:
// Behold the power of JQuery.
$('input').val('');
Selects are harder, because they have a fixed list. Do you want to clear that list, or just the selection.
Could be something like
$('option').attr('selected', false);
$('#formID')[0].reset(); // Reset all form fields
If you want to apply clear value to a specific number of fields, then assign id or class to them and apply empty value to them. like this:
$('.all_fields').val('');
where all_fields is class applied to desired input fields for applying empty values.
It will protect other fields to be empty, that you don't want to change.
I had a slightly more specialised case, a search form which had an input which had autocomplete for a person name. The Javascript code set a hidden input which from.reset() does not clear.
However I didn't want to reset all hidden inputs. There I added a class, search-value, to the hidden inputs which where to be cleared.
$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');
for empty all input tags such as input,select,textatea etc. run this code
$('#message').val('').change();
You can put this inside your jquery code or it can stand alone:
window.onload = prep;
function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
}
}