HTML5 min-max validation not triggering on form submit-CodePudding

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" >
            <div >
                    <div >
                        <label for="document_select" >Document Type</label>
                    </div>
                    <div >
                <select id="document_select" name="document_select" onchange="check(this);"  asp-items="Model.Options" required>
                            <option value="">Select Document Type...</option>
                        </select>
                    </div>
            </div>
            <div id="data-container"></div>
        <hr >
        <div >
            <div >
                <button asp-page-handler="Submit" type="submit" id="submitButton" >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" >
   <div >
      <div >
         <label for="document_select" >Document Type</label>
      </div>
      <div >
         <select id="document_select" name="document_select" onchange="check(this);"  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 >Date From</label>
<input  id="date_from" type="date" name="date_from" placeholder="YYYYMMDD">
<label >Date To</label>
<input  id="date_to" type="date" name="date_to" placeholder="YYYYMMDD"><label >Customer Number</label>
<input  id="custnum" required="" type="text" name="custnum" placeholder="5-digits (leading zeros if req)" min="5" max="5"></div>
   <hr >
   <div >
      <div >
         <button type="submit" id="submitButton"  formaction="/?handler=Submit">Submit</button>
      </div>
   </div>
   <input name="__RequestVerificationToken" type="hidden" value="CfDJ8ODOs5VF1fNCrt7BKIRwkQ-2pmNtFQGLUzRqCmgo5l-wRGYp4YrNASH3Fu7owYxQg3rCfuyZ_4Ri9Wp3wHyK7v-jSF8MiBU1bhbTTM4loSw8vdg4wr7ypCRZWnG9BE02pisy5vf6Xm67jVJQ-tLoNRgBnd_R8ezxFxHeSYET8NUKT-1pVe8WbWinQfD6e_HJDA">
</form>

CodePudding user response：

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>