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");
Related
I've been trying for like 2 hours to get this form validator to work, but I can't..
http://ink.sapo.pt/javascript/Ink.UI.FormValidator.2/#Ink_UI_FormValidator_2-FormValidator_FormElement-FormElement
I mean, form gets validated when I press the submit button, and form posts data only after all fields are correctly.
But what I need is to actually set up the onSuccess callback, so that instead of using method="post", i can a function easily.
You'll need to use the neverSubmit option to do this.
This is a rather obscure option, but it's there in the FormValidator class (you may be looking at the FormElement class, which refers to each input element in a form and takes options such as that input element's label and validation rules.)
I've made a short example based on the official sample.
http://jsbin.com/toruyo/edit?html,console,output
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.
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.
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;
I have controls that are dynamically added via javascript. I cannot set the class on these controls to “required” because I need the flexibility to place the error messages where I will.
When I add these controls, I loop through all that I need required, and call
$("#dynamicControlID").rules("add", {required:true});
The problem comes when I try to validate the form. When I call
$("#form1").validate()
any non-dynamic controls that have the class “required” specified will validate with a nice message that says “this field is required.” The controls that have been added dynamically do not show any message, and the validate function returns true even if they’re empty.
The real confusion comes when I validate the dynamic controls individually. If I call
$("#dynamicControlID").valid()
it will return false, and display the error message by the input. I do call
$("#form1").valid()
before I do anything with the dynamic controls.
Am I missing something here? What I would like is to call
$("#form1").valid()
and have the error messages show for all my dynamically added controls.
You're on the right track, but when you want to add rules to the new element, you have to have already called $('#form1').validate();.
So a common setup is something like this:
$('#form1').validate({
//your options
});
$('#dynamicControlID').rules('add',{required:true});
Have you tried creating the validation rules after the controls have been added to the form?
You can setup validation on page load and store in a variable and dynamically add rules to it like this:
var validator = $("#form1").validate(rules:{});
After adding a dynamic control to form..
validator.settings.rules.new_control_name = { required: true };
Then on form submission:
if($("#form1").valid()){
// valid
}