Develop Reference

How to validate a hidden input field in a form / change validation behavior?

I have a HTML form with several inputs which have the required attribute and thus are automatically validated when the form is submitted. This works fine, but I also have an input field of type='checkbox' that needs to be invisible/hidden due to special CSS styling, which changes a label's appeareance to display a styled checkbox. But this checkbox input field also needs to be validated (it has the required attribute).
So when the form is submitted, the browser (Chrome here) can't focus the invisible field, so it does nothing in the UI and gives the error
An invalid form control with name='consent' is not focusable.
How can I override the form validation to focus the label element instead of the invisible input element when it is invalid? Are there any useful form validation events that I can hook into to change this behavior?
Thanks in advance.
Edit: It's a bit similar to OPs question and this answer here: https://stackoverflow.com/a/23215333/15717315
Edit 2: I can optionally use jQuery.
This is what it looks like currently:
<div>
<input type='checkbox' id='myfield' class='my-styled-checkbox' name='myfield' required>
<label for='myfield'>
The label
</label>
</div>
Edit 3:
Alright, so I added an event listener to the submit event of the form. This successfully prevents the from from being submitted when the checkbox isn't checked.
document.getElementById("myform").addEventListener("submit", function(e) {
var field = document.getElementById("myfield");
if (field.checked) {
field.setCustomValidity("");
e.returnValue = true;
}
else {
field.setCustomValidity("Invalid");
e.returnValue = false;
}
});
But it still throws the same error as in the OP, and the validation message does not display.

It would be helpful if you provided with a code example. Also to know if you are using any framework or library like react, angular, etc.
Css properties like
visibility: hidden;
or
display: none;
do not prevent you from editting the DOM with js code. So you should be able to change the field value before submitting.
Also, if the field is not editable by the user, you could just not make it into a required field and assign it a default value. That way you are certain it will never submit being empty.
Looks like you are trying to focus the field, this is not what you want, you should be trying to just change the field's value with js or jquery.

Don't validate hidden field

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")

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.

Alternate required inputs in one page

I want to have alternate required inputs. My goal to my form is to hide and show the inputs regarding with what position (Faculty Member or Student as options) and store to the database. Different input fields for the Student, as well as different fields too for the Faculty Member. I used this code for my javascript hide & show inputs:
<script type="text/javascript">
$(document).ready(function(){
$('#fac').hide();
$('#stud').hide();
$("#thechoices").change(function(){
$("#all").children().show();
$("#" + this.value).show().siblings().hide();
});
$("#thechoices").change();
});
</script>
However, when I choose Student (so Student input fields appear now and Faculty Member input fields are hidden),fill up the fields, and click Submit button, I can't proceed to the form action I put because the hidden fields for faculty member are also required to be filled. And if I eliminate the required attribute on each input, my database could be destroyed (such as multiple inputs, blank inputs). I got almost the same question but I still did not understand the given answer. What should I do?

I suppose you have used JQuery.
Try this approach.
You can intercept the form submission with this event handler.
Add this to your existing script.
$("form").submit(function( event ) {
// check if field is visible
if ( $("field").is(":visible") ) {
// validate it
}
}
For more info, Check JQuery Documentation at below links
Form Submit http://api.jquery.com/submit/
Visible selector : http://api.jquery.com/visible-selector/
HTH

remove value on field on submit if value is equal to default value?

I have a form that uses a servlet I don't have access to for validation. The powers that be want the field to be prefilled with a value "Enter promotion code" - unfortunately, since placeholder doesn't work with IE, the field is going through the validation process on submit for the default text.
Is there a way to clear the value on that field if the value equals the default text when the form is submitted? (jquery or javascript)
thanks!

You should toss this somewhere on load.
If you aren't using jQuery on the page yet, it'll look like this:
$(function() {
// when the submit button is pressed
$('#yourForm').submit(function() {
if($('#yourInputBox').val() == YOUR_DEFAULT_STRING)
$('#yourInputBox').val(''); // clear the value
return true; // submit the form
});
});

You haven't provided any code to work with, but conceptually you can hook the submit function for your form with javascript, check to see if the prefilled value is still in the form and clear it if so and then allow the submit to proceed.