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>

How can I check if the type DATE is filled?

I have some questions.
I need to do an appointment form, where I have a bunch of text fields, for the name, email, a DATE field and two dropdown menus. At the end of the form, I have a submit button, but I want it to work only if all of the fields above are filled and if the fields are not filled i have an alert message. I did the verification for the name and email to see if the textboxes are empty or not, but I can't do it for the dropdown menus and the date. The date should be picked by the customer and if it's not picked from the menu I have the placeholder "DD.MM/YYYY".
For the dropdown menus I also have placeholders, and I wanna check if the customer has picked one of the options, how can I check if the value of it is the placeholder name that i set?
This is the code to check if the name and email fields are filled and it works. But I can't find any code to work to check if date is empty or the dropdown menus option is the same placeholder.
<script language="JavaScript1.1" type="text/javascript">
function popupok() {
ok = false;
test1=false;
const textbox1 = document.getElementById("name");
const textbox2 = document.getElementById("email");
if(textbox1.value.length && textbox2.value.length > 0)
{
ok=true;
}
if(ok==true)
{
alert("appointment has been scheduled!")
}
else
{
alert("please fill the required fields!")
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="well-block">
<div class="well-title">
<h2>Programeaza-te acum!</h2>
</div>
<form required>
<!-- Form start -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="name">Nume</label>
<input id="name" name="name" type="text" placeholder="Nume complet" class="form-control input-md"required>
</div>
</div>
<!-- Text input-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input id="email" name="email" type="text" placeholder="E-Mail" class="form-control input-md" required>
</div>
</div>
<!-- Text input-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="date">Data programarii</label>
<br/>
<input type="date" id="date" name="date" required>
</div>
</div>
<!-- Select Basic -->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="time">Ora programarii</label>
<select id="time" name="time" class="form-control" required>
<option value="8:00">8:00</option>
<option value="9:00">9:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option></option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="appointmentfor">Serviciul dorit</label>
<select id="appointmentfor" name="appointmentfor" class="form-control" required>
<option value="Service#1">Coafor</option>
<option value="Service#2">Cosmetica</option>
<option value="Service#3">Manichiura</option>
</select>
</div>
</div>
<!-- Button -->
<div class="col-md-12">
<br/>
<div class="form-group">
<button id="singlebutton" name="singlebutton" type="submit" onclick="popupok()">Rezerva locul!</button>
</div>
</div>
</div>
</form>```

You can -- the date seems to be an empty string, so you can simply do:
if (date) {
// date isn't an empty string, null, or undefined.
}
const input = document.getElementById("input");
console.log(`${input.value} (has value: ${!!input.value})`)
input.addEventListener("change", () => {
console.log(`${input.value} (has value: ${!!input.value})`)
})
<input type="date" id="input">

use:
const DROPDOWN = document.querySelector('.dropdown');
if(DROPDOWN.value === '') {
// do something if empty
}
if(DROPDOWN.value === 'option value') {
// do something
}
//every option has a value. in html you should specify it in tag by value = 'something';
to check if dropdown is chosen or not. although I don't know what kind of dropdown it is.
for date just do the same thing but like
if(DATE.innerHTML === "DD.MM/YYYY") { //your placeholder
// do something
}
or
if(DATE.value === "DD.MM/YYYY") { //your placeholder
// do something
}
if the user hasn't changed the date it would be same as your placeholder.

You have already used the "required" attribute in your fields which is a HTML5 attribute that forces the form not to be submitted if the field is empty, so you dont need additional JS code.
In case of select dropdowns you are missing an empty entry. Just add a first option in the dropdown with empty value and it will work. Do it like this:
<select name='myselect' id='myselect' required>
<option value=''>Please select</option>
<option value='1'>First option</option>
<option value='2'>Second option</option>
</select>
Its important to have the first option with an empty value. The first option always gets selected by default and the empty value there will trigger the validation.

How can i disable a input field with a dynamic select?

I want to create a dynamic select element where if I choose a certain option and a specific text input field is disabled.
Here is my HTML:
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" class="form-control" id="tipoCompra" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
If the user selects the option "Nacional" I want to make the following input field disabled so they can't enter any value.
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
I'm using JavaScript for my functions and some Jquery, but I don't know how to create a function for this.
This is my function:
function TipoCompra(){
var tipoCompra = document.getElementById('tipoCompra').value;
console.log(tipoCompra);
var fob = document.getElementById('fob');
if (tipoCompra == 'Nacional'){
fob.disable = true;
} else {
fob.disable = false;
}
}
But i dont know how to change the disabled property.

You need to check change of your select with change function of jQuery
https://api.jquery.com/change/
And check the value of your select.
Then use prop function to disabled your element.
https://api.jquery.com/prop/
$('#fob').prop('disabled', true);
$("select[name='test']").change(function() {
let selectVal = $(this).val();
if (selectVal == 'Nacional') {
$('#fob').prop('disabled', false);
} else {
$('#fob').prop('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="test" class="form-control" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2 costo">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>

HTML
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" id="myList"class="form-control" required onchange="disable()">
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
JS
function disable(){
if(document.getElementById('myList').value == 'Nacional'){
document.getElementById('fob').disabled = true
}
else{
document.getElementById('fob').disabled = false
}
}

Based on your update with your JavaScript there's a few changes you need to make:
Assuming you want to inline the JavaScript function for onchange like your other functions
This should include onChange="TipoCompra()":
//<select name="" class="form-control" id="tipoCompra" required>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
This should be disabled:
//fob.disable = true;
fob.disabled = true;
disabled="false" is invalid in your input:
//<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
A number of attributes are boolean attributes. The presence of a
boolean attribute on an element represents the true value, and the
absence of the attribute represents the false value.
The values "true" and "false" are not allowed on boolean attributes.
To represent a false value, the attribute has to be omitted
altogether.
Functional example. Note: I removed the calls to the Todas(); function since it wasn't included with your question.
function TipoCompra(){
var tipoCompra = document.getElementById('tipoCompra').value;
console.log(tipoCompra);
var fob = document.getElementById('fob');
if (tipoCompra == 'Nacional'){
fob.disabled = true;
} else {
fob.disabled = false;
}
}
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" required>
</div>

jQuery: if statement to select an option value

My aim is:
If I type a value bigger than 60, then I would like the option "Long"
to be selected.
If I type a value less than 60, then I would like the option "Short" to be selected.
With help of of jQuery, I would like for "result" to be automatically changed given the field "value"
I have a form, contains an input integer field, with id "value", and form has a option field with id "result".
Below is my try, but it does not work.
Thanks for your input.
var value = $('#value');
$(value).change(function() {
debugger;
if (Number($(this).val()) > 60) {
$('#result').prop('value') = "Long";
}
if (Number($(this).val()) < 60) {
$('#result').prop('value') = "Short";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="value" class="col-form-label col-sm-4">Value</label>
<div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value"> </div>
</div>
<div><i>Result:</i></div>
<div id="result" class="form-group row">
<div class="col-sm-12">
<select name="result" class="select2 form-control" style="width: 100%;" id="result">
<option value="Long">Long</option>
<option value="Short">Short</option>

You can set the selected value using .val(....).
var value = $('#value');
$(value).change(function() {
debugger;
if (Number($(this).val()) > 60) {
$('select').val("Long");
}
if (Number($(this).val()) < 60) {
$('select').val("Short");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="value" class="col-form-label col-sm-4">Value</label>
<div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value"> </div>
</div>
<div><i>Result:</i></div>
<div id="result" class="form-group row">
<div class="col-sm-12">
<select name="result" class="select2 form-control" style="width: 100%;" id="result">
<option value="Long">Long</option>
<option value="Short">Short</option>
Beside that, you have some problems in the HTML, you've used the same ID (result) multiple times. IDs are meant to be unique.
As #Archer mentioned, none of the two current conditions will match if the value is 60, you will need to do a >= or <= comparison to account for those cases.

Three things I see here:
You're setting the value incorrectly. Instead of .prop('value') = 'Long', which isn't valid JavaScript, just use .val('Long').
You're re-using the "result" ID, so you're targeting the wrong element. IDs must be unique.
The HTML is incomplete. Might not be a cause of the problem, but certainly worth fixing.
So something more like this:
var value = $('#value');
$(value).change(function() {
debugger;
if (Number($(this).val()) > 60) {
$('#result').val('Long'); // 1. Setting the value correctly with jQuery
}
if (Number($(this).val()) < 60) {
$('#result').val('Short');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="value" class="col-form-label col-sm-4">Value</label>
<div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value"> </div>
</div>
<div><i>Result:</i></div>
<div class="form-group row"> <!--- 2. Removing the errant ID --->
<div class="col-sm-12">
<select name="result" class="select2 form-control" style="width: 100%;" id="result">
<option value="Long">Long</option>
<option value="Short">Short</option>
</select> <!--- 3. Correcting the remaining HTML --->
</div>
</div>

// No need to wrap '#value' twice with jQuery function
$('#value').change(function() {
// You do not need two ifs, since the two value are exclusive
const option = $(this).val() > 60 ? "Long" : "Short";
// You had two different elements with the id "result"
// and .val is a function, you can pass the new value as argument
$('#selection').val(option);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="value" class="col-form-label col-sm-4">Value</label>
<div class="col-sm-7"> <input type="number" name="value" class="numberinput form-control" id="value" /> </div>
</div>
<div><i>Result:</i></div>
<div id="result" class="form-group row">
<div class="col-sm-12">
<select name="result" class="select2 form-control" style="width: 100%;" id="selection">
<option value="Short">Short</option>
<option value="Long">Long</option>
</select>
</div>
</div>

i think,it will help you
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("#value").on('input', function () {
var value = parseInt($("#value").val());
if (value > 60) {
$("#result").prop("value", "Long");
}
if (value <= 60) {
$("#result").prop("value", "Short");
}
});
});
</script>
<input type="number" name="value" class="numberinput form-control" id="value" />
<select name="result" class="select2 form-control" style="width: 100%;" id="result">
<option value="Short">Short</option> <option value="Long">Long</option>
</select>

How to set the current value to 0

Problem: I have the following script that checks if the field has been selected. If the dropdown field has not been selected, no results will be displayed():
$(document).ready(function(){
var $zip = $('#zip');
var $city = $('#city');
var $hospital = $('#hospital');
var $miles = $('#miles');
$zip.on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
$city.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$hospital.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
});
function checkTextField() {
var distance = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
/*if(zip && distance || !zip && !distance){
return true;
}else{
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
alert(alertMessage);
return false;
}*/
if(zip && !distance){
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
alert(alertMessage);
return false; //Does not submit form
}
else
return true;
}
here is the form:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group"><!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required convert-to-number>
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
So when the form is first generated, I enter a zip code and select the submit button. When I do that, in the beginning, instead of showing the alert notifying the user to select a mileage, it will display the result based on the default set to 5.
I would like to set the value to 0/empty if the user has selected the option to look up urgent care by zip code, only in the beginning (meaning when the form is first generated), otherwise, set it to default 5 miles when user looks up by entering a name of a urgent care and city.