Develop Reference

HTML5 min-max validation not triggering on form submit

Tested in: Version 109.0.5414.120 (Official Build) (64-bit) Chrome
Stack: ASP.NET Core Razor Pages, HTML5, JavaScript
Problem: I currently have a form on my page within which form fields are dynamically rendered based on values from a drop-down list. Everything there works fine, but despite including some HTML5 client-side validation on fields (and checking that the tags seem to be rendering fine) the validation does not trigger on form submit. Or - more accurately - the 'required' tag works, but the min/max tag does not. Could someone assist?
HTML and JavaScript before rendering:
HTML
<form id="search_form" method="post" class="row g-3">
<div class="row g-3">
<div class="col-md-4">
<label for="document_select" class="form-label">Document Type</label>
</div>
<div class="col-md-8">
<select id="document_select" name="document_select" onchange="check(this);" class="form-control" asp-items="Model.Options" required>
<option value="">Select Document Type...</option>
</select>
</div>
</div>
<div id="data-container"></div>
<hr class="my-4">
<div class="row g-3">
<div class="col-md-4">
<button asp-page-handler="Submit" type="submit" id="submitButton" class="w-100 btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
JavaScript which turns the data-container into form fields:
function updatePage(data, form, op) {
console.log(op);
for (var i = 0; i < data[0].inputs.length; i++) {
var field = data[0].inputs[i];
var label = document.createElement("label");
var input = document.createElement("input");
label.classList.add("form-label");
input.classList.add("form-control");
label.innerHTML = field.label;
input.id = field.id;
input.required = field.isRequired;
input.type = field.type;
input.name = field.id;
input.value = field.value;
input.placeholder = field.placeHolder;
if (input.name == "custnum")
{
input.min = "5";
input.max = "5";
input.oninput = "this.setCustomValidity('')";
input.oninvalid = "this.setCustomValidity('" + field.error + "')";
}
form.appendChild(label);
form.appendChild(input);
}
}
Fully rendered form
<form id="search_form" method="post" class="row g-3">
<div class="row g-3">
<div class="col-md-4">
<label for="document_select" class="form-label">Document Type</label>
</div>
<div class="col-md-8">
<select id="document_select" name="document_select" onchange="check(this);" class="form-control" required="">
<option value="">Select Document Type...</option>
<option value="adjustment_note">Adjustment Note</option>
<option value="buyin_chargethrough">Buy-in Authorisation</option>
<option value="supplier_claim">Claim Note</option>
<option value="cold_chain">Cold Chain Compliance</option>
<option value="dd_confirmation">DD Confirmation</option>
<option value="supplier_eft_remittance">EFT Remittance</option>
<option value="invoice">Invoice</option>
<option value="knockout">Knockout Report</option>
<option value="order_summary">Order Summary</option>
<option value="supplier_rtv">RTV</option>
<option value="sra_authorisation_rejection">SRA</option>
<option value="statements">Statement</option>
<option value="statement_of_purchase">Statement of Purchase</option>
<option value="turn_over_summary">Turnover Summary</option>
<option value="packing_list">Packing List</option>
</select>
</div>
</div>
<div id="data-container">
<label class="form-label">Date From</label>
<input class="form-control" id="date_from" type="date" name="date_from" placeholder="YYYYMMDD">
<label class="form-label">Date To</label>
<input class="form-control" id="date_to" type="date" name="date_to" placeholder="YYYYMMDD"><label class="form-label">Customer Number</label>
<input class="form-control" id="custnum" required="" type="text" name="custnum" placeholder="5-digits (leading zeros if req)" min="5" max="5"></div>
<hr class="my-4">
<div class="row g-3">
<div class="col-md-4">
<button type="submit" id="submitButton" class="w-100 btn btn-primary btn-lg" formaction="/?handler=Submit">Submit</button>
</div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8ODOs5VF1fNCrt7BKIRwkQ-2pmNtFQGLUzRqCmgo5l-wRGYp4YrNASH3Fu7owYxQg3rCfuyZ_4Ri9Wp3wHyK7v-jSF8MiBU1bhbTTM4loSw8vdg4wr7ypCRZWnG9BE02pisy5vf6Xm67jVJQ-tLoNRgBnd_R8ezxFxHeSYET8NUKT-1pVe8WbWinQfD6e_HJDA">
</form>

The min and max attributes only work for numeric input types, e.g. number, range, date, etc. They check that the number is greater than / lesser than a given value, not that it has a certain character length.
If you want to stick with HTML5 validation, you could use a RegEx pattern to achieve what you want:
<form>
<input type="text" required pattern="^.{5}$" title="Must be 5 characters long">
<button>Submit</button>
</form>

Why updateValueAndValidity is not updating the value of form Controls in Angular 12

I have recently migrated from Angular 9 to Angular 12 and observing form control value issue. Below are the details of the issue:
I have a dropdown control, based on the value selected there are
controls which has to update the value according to my model,
When value of dropdown control is changed , my dependent controls
value is not updating according to the model, in code debug my form
is having the value based on the changes done to drop down, even
though this.form.updateValueAndValidity(); applied, changes are not
reflected in the UI.
Here is the HTML file
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{item.ShortName}}</option>
</select>
</div>
//Below controls are dependent on the above value selected, for each selection change different values to be display
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{{item.ShortName}}</option>
</select>
</div>
<div>
<div class="form-control tooltip">
<label class="form-control-label" for="name">Name</label>
<div class="tooltip">
<input type="text" maxlength=13 formControlName="Name" id="name">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="age">Age</label>
<div class="tooltip">
<input type="text" formControlName="Age" NumberOnly="true" id="age">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="Height">Height</label>
<div class="tooltip">
<input type="text" formControlName="Height" NumberOnly="true" id="height">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="weight">Weight (kg)</label>
<div class="tooltip">
<input type="text" NumberOnly="true" formControlName="Weight" id="weight">
</div>
</div>
</div>
file which has to update the value
this method is for updating my form contols
updateControls(show: boolean, formMeta: object, data?: { [key: string]: string })
{
Object.keys(formMeta).forEach((formName) =>
{
if (!show)
{
//remove control if none selected
this.form.removeControl(formName);
return;
}
//add controls on value change and update the controls
this.form.addControl(formName, formMeta[formName]);
this.form.get(formName).patchValue(data[formName]);
});
this.form.updateValueAndValidity(); //update my form, but it doesn't reflect the updated content in UI
}

Disabling couple input area if dropdown equal to 1

I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown
I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing
HTML Code which will use for condition:
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
HTML Code Which i want to disable if slider_type equal to 1
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
I tried this JavaScript code lines for 1 input area but it's not worked
<script type="text/javascript">
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
</script>
What's really wrong?

You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.
Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.
function DisableSliderInputArea() {
if (document.getElementById("slider_type").value == "1") {
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");
// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

jQuery find all elements with same name start as selector

I am building the form which has SELECT and few inputs. The part of it looks like this (only for Monday example, there will be 7 days..):
<div class="row">
<div class="col-md-3">
<div class="form-group mb-md">
<input type="text" name="1[day]" class="form-control text-bold" value="Monday" readonly>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<select class="form-control input-md mb-md" name="1[open]">
<option value="1" selected>Open</option>
<option value="0">Closed</option>
</select>
</div>
</div>
<!-- Working Hours -->
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[start]" value="08:00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[end]" value="22:00">
</div>
</div>
<!-- Booking Hours -->
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[from]" value="08:00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[to]" value="22:00">
</div>
</div>
</div>
I want to make time fields with same name start as SELECT field name start react to SELECT change. If value is 0 then all fields with same name start get attribute disabled.
So far i made this function, however i don't know hot to determine changed field name and correspondingly take actions against other fields.
$("select[name$='[open]']").change(function() {
if ($(this).val() == 0) {
// Should disable all input fields with same name as SELECT
} else if ($(this).val() == 1) {
// Should enable all input fields with same name as SELECT
}
});

Not sure if this is what you are attempting to achieve.
Please try below code.
$("select[name$='[open]']").change(function() {
var num = $(this).attr("name").replace("[open]",'');
var elems = $( "input[name^='"+num+"']");
if ($(this).val() == 0) {
// Should disable all input fields with same name as SELECT
elems.prop('disabled',true);
} else if ($(this).val() == 1) {
// Should enable all input fields with same name as SELECT
elems.prop('disabled',false);
}
});
Check the working fiddle here.

Javascript hide/show questions depending on user input values

I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/

You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.

This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}

It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};