Don't validate hidden field - javascript

I have some fields that are shown only depending on some conditions, it work's fine to show and hide field with Jquery
but these fields are validated on submit even if they are hidden, I have required in the model
how I can't validate the hidden fields ?? I found : http://fluentvalidation.codeplex.com/
or I can apply the following MVC hidden field being validated
Thanks

you can change the input name attribute when you are hiding/showing it.
That way the it would be ignored.

When you are doing your validation, add a condition:
if($("#myHiddenElement").css("display")!="none")

Related

Dynamically change parsley rules for a field

I have a task which I can simple describe: I have a dropdown with, say, 3 positions. And one field.
If option0 is selected, then no validation for a field required.
If option1 is selected, then field should be numeric.
If option2 is selected, then field should match some regex.
How can I achieve this behaviour with Parsley?
The only way I found for now is remove a whole parsley, change HTML and then reinit it:
$(myDropDown).change(function() {
$('form').parsley().destroy();
var input = $(this).parent().find(".my-cool-input");
//changing input attributes based on selected value
//reinitialize parsley
$('form').parsley();
});
But here I change global state of whole parsley while I want to change one field validation only.
Another option is writing a custom validator, but I want to reuse standard email and others validation rules and messages, if possible.
Just change the field attributes and trigger('input') on it.

jquery enable/disable fields based on variable

I have a variable that i am using to disable input fields across all field sets in a page.
$("[eventDisabled='true'] input").attr('disabled', 'disabled');
However i need to enable certain input fields that are in some specific div, i have placed those input fields in some other div
When i use below code to enabled them, it is not working
$("[eventDisabled='true'] #someotherdiv input").attr('enabled', 'enabled');
Any help
One way to suppress inputs within a specific container by using the css psudo-class :not(selector) in your jQuery selector as follows:
$('div:not(#someotherdiv) input[eventDisabled=true]')
This will select all inputs that has an attribute of eventDisabled with a value of true and that is not a child of a div with an id of someotherdiv

Text filed and dropdown validation without submit in angularjs

I am validating a textfield and dropdown. Both can be empty or both must be filled. I looked into below sample, but it validates only on button click. I need to validate once the user moves to some another field in the form without filling the text filed and after selecting the dropdown, similar to onblur event. I could not find any samples to my issue. Any pointers to my question ?
I think you can do the trick with ng-touched. It is applied when the element has lost focus.
These class can be combined with Angular validation and a ng-class
ng-class="{'has-error':yourModelObject.$invalid && yourModelObject.$touched}"
To make something like:
<div ng-class="{'has-error':yourModelObject.$invalid && yourModelObject.$touched}"">
<input type="text" ng-model="yourModelObject" required>
<div>

Angular Validation to show all errors on submit

I have a simple example form that will validate a name to be required and 3 letters at least. Nicely display errors as you make the field dirty:
[http://plnkr.co/edit/FEclhN?p=preview]
Our designer wants , however, all the fields that are empty and that are "required" to go "red" as well, when the user presses the Submit button. Right now, unless they have touched and made the field "dirty" the validation doesn't turn the field red.
Of course the field should not be red to start with, only after they Submit the form or they make a field dirty.
jQueryValidate.org does this, so that's what they want in Angular too.
I ran into this same requirement and solved it by adding a boolean onto my controller's scope to indicate if the form had been submitted formSubmitted
And inside my form submit method I would set the value of formSubmitted to true
Then I would dynamically add a class where I needed:
<div ng-class="{'required-error': formSubmitted && formName.field.$error.required}">
<input name="field" required/>
</div>
You can also use this
https://github.com/AngularAgility/AngularAgility
For all controls and error summary in toster.
Its best way to validate and focus on field which causes validation.

How to create conditional fields that are required to be filled out

I learned from other post that I could use the following the create a conditional field:
$('your selects class or id').change(function(){
if($(this).val() == "publish_on"){
$('.secret').fadeIn();
}
else{
$('.secret').hide();
}
});
From my understanding of this code, it only show/hides the field, instead of actually cancel the field. This is all fine except what if the pop-up field (.secret) needs to be a required field and I use form validation to make sure all required fields are filled out? Does "submit" button omit non-displaying field automatically? Do I need add on further javascript to make it only required when appearing?
Does "submit" button omit non-displaying field automatically? Do I need add on further javascript to make it only required when appearing?
No,It doesn't omit the hidden fields.It submit's them too.
And you need to omit them while doing validation.
Some thing like using visible seletors
if ( $("#targetEleme").is(":visible") ) {
//then do this validation
}

Categories

Resources