User Input Validation

H:Dev+ provides input validation functionality to handle user data safely and consistently within input forms.
You can define validation attributes on input fields and run checks either in real time or on submission, according to the validity conditions.

Input Validation Flow

You can configure input validation by following these steps:

  1. Identify the validation pattern for the data to be validated
  2. Set the validation pattern using the data-validation attribute
  3. Set whether real-time replacement applies using the data-validation-type attribute (optional)
  4. For checkboxes, set the selection count limit using data-validation-limit

Validation Patterns

Pattern NameValue
phone-auto-hyphenPhone number format including '-' hyphensReplace supported
phoneNumeric phone number formatReplace supported
phone-compactPhone number in 0000-0000 format, excluding the leading digits such as the area codeReplace supported
emailEmailReplace supported
domainDomain including http or https
password-8-328-32 character format with digits, letters, and special characters (?=.*[~!@#$%^*()+-=[]{};:?.,_)Replace supported
password-4-84-8 character format with digits, letters, and special characters (?=.*[~!@#$%^*()+-=[]{};:?.,_)Replace supported
numberDigitsReplace supported
number-alphabetDigits + lettersReplace supported
number-alphabet-underscoreDigits + letters + underscore ('_')Replace supported
not-emptyInput required
ip-v4IP address in IPv4 format (000.000.000.000)Replace supported
check-limitValidates the minimum and maximum number of checkbox selections set via the 'data-validation-limit' attribute
radio-checkValidates whether a radio button is selected

HTML attributes

Tag : <form>

NameValueDescription
data-validation-alertyes or undefinedDisplay an alert when input validation fails
- The data-validation-alert attribute applies only to post creation, sign-up, and web forms.

Tag : <input>

NameValueDescription
data-validationValidation patternRefer to the Validation Patterns section above
data-validation-typereplace or undefinedFor patterns that support replacement, replaces the input value into the corresponding pattern format
data-invalid-messageStringMessage to display when input validation fails

Tag : <div> (Checkbox group - applied to the parent element)

NameValueDescription
data-validationcheck-limitSelection count validation pattern
data-validation-limit1-3Minimum and maximum selectable count in 'min-max' format

Tag : div(parent tag of radio buttons)

NameValueDescription
data-validationradio-checkRadio button selection required

HTML

Please enter a valid value OK
Please enter a valid value OK
Please enter a valid value OK
You can select 2 to 4 items. OK 
<form id="frm_validation">
    <!-- phone-auto-hyphen : phone number format with '-' hyphens included -->
    <div class="mb-3">
        <label class="form-label">phone-auto-hyphen</label>
		<input type="text" class="form-control" data-validation="phone-auto-hyphen" data-validation-type="replace" placeholder="Phone number format with '-' hyphens"/>
		<small class="invalid-feedback">Please enter a valid value</small>
		<small class="valid-feedback">OK</small>
	</div>
    <!-- phone-compact : phone number in 0000-0000 format excluding the area code and other prefixes -->
	<div class="mb-3">
		<label class="form-label">phone-compact</label>
		<input type="text" class="form-control" data-validation="phone-compact" data-validation-type="replace" placeholder="Numeric phone number format"/>
		<small class="invalid-feedback">Please enter a valid value</small>
		<small class="valid-feedback">OK</small>
	</div>
    <!-- email : email -->
	<div class="mb-3">
		<label class="form-label">email</label>
		<input type="text" class="form-control" data-validation="email" data-validation-type="replace" placeholder="Email"/>
		<small class="invalid-feedback">Please enter a valid value</small>
		<small class="valid-feedback">OK</small>
	</div>
    <!-- check-limit : validates the minimum and maximum number of checkbox selections set via the 'data-validation-limit' attribute -->
	<div class="mb-3">
		<label class="form-label">check-limit</label>
		<div class="form-control d-flex justify-content-start align-items-center" data-validation="check-limit" data-validation-limit="2-4">
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck1">
				<label class="form-check-label small" for="ck1">
					Check 1
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck2">
				<label class="form-check-label small" for="ck2">
					Check 2
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck3">
				<label class="form-check-label small" for="ck3">
					Check 3
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck4">
				<label class="form-check-label small" for="ck4">
					Check 4
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck5">
				<label class="form-check-label small" for="ck5">
					Check 5
				</label>
			</div>
		</div>
		<small class="invalid-feedback">You can select 2 to 4 items.</small>
		<small class="valid-feedback">OK</small>
	</div>
</form>

Related Links