JavaScript forms, constraint validation DOM properties

1.JavaScript form

1.1JavaScript Form Validation

HTML form validation can be done through JavaScript.

The following instance code is used to determine whether the form field (fname) value exists, and if so, to eject the message, or to prevent the form from being submitted:

function Validateform () {    var x = document.forms["myForm"] ["  fname"].value;     if NULL "" {        alert (" you need to enter a name.") ");         return false ;    }}

The above JavaScript code can be called via HTML code:

<form name="MyForm"action="demo_form.php"onsubmit="return Validateform ()"Method="Post">Name:<input type="text"Name="fname"><input type="Submit"Value="Submit"></form>

1.2HTML Automatic verification of form forms

HTML form validation can also be done automatically through a browser.

If the value of the form field (fname) is empty, the required property prevents the form from being submitted:

<form action="demo_form.php" method="post">  < Input type="text" name="fname" required= " Required ">  <input type=" submit " value=" "></form>

1.3 Data validation

Data validation is used to ensure that the data entered by the user is valid.

Typical data validation is:

• Does the required field have input?
• Does the user enter legitimate data?
• Did you enter text in the Number field?

In most cases, data validation is used to ensure that users enter data correctly.

Data validation can be defined in different ways and invoked in several ways.

Server -side data validation is verified after the data is submitted to the servers.

Client data validation side validation is done on the browser before the data is sent to the server.

1.4HTML Constraint Validation

HTML5 adds a new way to validate HTML forms: Constraint validation (constraint validation).

Constraint validation is an algorithm that the browser uses to implement validation when a form is submitted.

HTML constraint validation is based on:

• HTML Input Properties
• CSS pseudo-Class selector
• DOM Properties and methods

Constraint validation HTML input properties

Properties	Description
Disabled	Specifies that the INPUT element is not available
Max	Specifies the maximum value of the INPUT element
Min	Specifies the minimum value of the INPUT element
Pattern	A pattern that specifies the value of the INPUT element
Required	Specify that INPUT element fields are required
Type	Specifies the type of INPUT element

Constraint Validation CSS pseudo-class selector Selector

Selector	Description
:d isabled	Select the input element with the property "disabled" property
: invalid	Select an invalid INPUT element
: Optional	Select an INPUT element without the "required" attribute
: Required	Select the input element with the "required" attribute
: Valid	Select the input element for a valid value

1.5e-mail Verification

This means that the data entered must contain the @ symbol and the dot (.). At the same time, @ cannot be the first character of the email address and must have at least one dot after @:

function Validateform () {varx=document.forms["MyForm"]["Email"].value; varAtpos=x.indexof ("@"); varDotpos=x.lastindexof ("."); if(atpos<1|| dotpos<atpos+2|| dotpos+2>=x.length) {Alert ("not a valid e-mail address"); return false; }}

<form name="MyForm"action="demo-form.php"onsubmit="return Validateform ();"Method="Post">Email:<input type="text"Name="Email"> <input type="Submit"Value="Submit"></form>

2.JavaScript Authentication API

2.1 Constraint Validation DOM method

Property

	Description
Checkvalidity ()	Returns true if the data in the INPUT element is valid, otherwise false is returned.
Setcustomvalidity ()	Sets the Validationmessage property of the input element, which is used to customize the method of the error message. When a custom prompt is set with setcustomvalidity, the validity.customerror becomes true, and checkvalidity always returns false. If you want to re-determine the need to cancel the custom prompt, the way: Setcustomvalidity(") setcustomvalidity (null) setcustomvalidity( Undefined)

The following instance returns an error message if the input information is illegal:

<input id="ID1"Type=" Number"min=" -"max=" -"Required><button onclick="myFunction ()"> Verification </button> <p id="Demo"></p> <script>function MyFunction () {varInpobj = document.getElementById ("ID1"); if(inpobj.checkvalidity () = =false) {document.getElementById ("Demo"). InnerHTML =Inpobj.validationmessage; }}</script>

2.2 Constraint Validation DOM properties

Properties	Description
Validity	Boolean property value that returns whether the input value is legal
Validationmessage	Browser error message
Willvalidate	Specifies whether input requires validation

2.3Validity Properties

The validity property of the INPUT element contains a series of information about validity data properties:

Properties	Description
Customerror	Set to TRUE if custom validity information is set.
Patternmismatch	Set to True if the value of the element does not match its modal property.
Rangeoverflow	Set to True if the value of the element is greater than the maximum value set.
Rangeunderflow	Set to True if the value of the element is less than its minimum value.
Stepmismatch	Set to True if the value of the element is not set according to the specified step property.
Toolong	Set to True if the value of the element exceeds the length of the MaxLength property setting.
Typemismatch	Set to True if the value of the element is not the expected match type.
Valuemissing	Set to True if the element (Required property) has no value.
Valid	Set to True if the value of the element is legal.

<input id="ID1"Type=" Number"max=" -"><button onclick="myFunction ()"> Verification </button> <p id="Demo"></p> <script>function MyFunction () {varTXT =""; if(document.getElementById ("ID1"). validity.rangeoverflow) {txt="the value entered is too large."; } document.getElementById ("Demo"). InnerHTML =txt;}</script>

A message is displayed:

<input id="ID1"Type=" Number"min=" -"Required><button onclick="myFunction ()">OK</button> <p id="Demo"></p> <script>function MyFunction () {varTXT =""; varInpobj = document.getElementById ("ID1"); if(!IsNumeric (Inpobj.value)) {txt="you're not typing numbers."; } Else if(inpObj.validity.rangeUnderflow) {txt="the value entered is too small"; } Else{txt="Enter the correct"; } document.getElementById ("Demo"). InnerHTML =txt;} //determines whether the input is a numberfunction IsNumeric (n) {return!isnan (parsefloat (n)) &&isfinite (n);}</script>

JavaScript forms, constraint validation DOM properties