Library Forms: Custom HTML Form Validation

Custom HTML forms can contain any type of custom form validation. Include the necessary scripts/styles directly within the code block for the form.

For instance, in the following example, custom JavaScript is being used to validate a custom HTML form. You can add the onsubmit event to the form and execute the form validation as such. 

‹script type="text/javascript"›
 	function validateForm() {
 		var x=document.forms["myForm"]["fname"].value;
	 	
if (x==null || x=="") {
alert("First name must be filled out");
	return false;
}
}
‹/script›


‹form id="myForm" onsubmit="return validateForm()"›
     First name: ‹input type="text" name="fname"›‹input type="submit" value="Submit"›
‹/form›

Or, to use ion’s built in validation, map the HTML form fields to ion form fields.

By default when mapping your HTML form field to a ion field it will pick up ion's validation patterns.

NOTE: When using ion's validation patterns, include the following error handling classes to the form elements and stylize as desired. These classes will highlight or call attention to the form field if validation fails.
 

.pf_field_row_bad: CSS class for bad field rows if form built in table format
.pf_label_cell_bad: CSS class for bad label cells if form built in table format
.pf_label_text_bad: CSS class for bad label text
.pf_field_cell_bad: CSS class for bad field cells if form built in table format
.pf_hint_text_bad: CSS class for bad hint text