JavaScript Form Validation

HTML form validation can be done with JavaScript.

HTML forms are usually used to collect user information, such as name, email address, location, age, and so on.

However, it is likely that some users may not enter the data you expect.

To avoid unnecessary pressure on server resources, you can use JavaScript to validate form data on the client side (user system).

is executed by the web browser before the input is sent to the web server.Client-side validation.

After the input is sent to the server,Server-side validationis executed by the web server.

　　<div class="wrapper">
　　　　<h2>Create an account/h2>
　　　　<label for="username"><b>Name</b>/b></label>
　　　　<input type="text" placeholder="Enter Username" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email</b>/b></label>
　　　　<input type="email" placeholder="Enter Email" name="uemail" id="useremail" required>
　　　　<label for="userpwd1><b>Password</b>/b></label>
　　　　<input type="password" placeholder="Enter Password" name="psw" id="userpwd1required>
　　　　<input type="password" placeholder="Confirm Password" name="cpsw" id="userpwd2required>
　　　　<p style="margin-top:　10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">Female</label>/label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">Male</label>/label>
　　　　</p>
　　　　<button type="submit">Register</button>/button>
　　</div>
　　<div class="footer">
　　　　<div>Have an account? <a href="#">Log in</a></div>/a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1　= document.getElementById("userpwd1}).value;
　　let pswd2　= document.getElementById("userpwd2}).value;
　　
　　if(name == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　if(email == "") {
　　　　alert("Email must be filled out");
　　　　return false;
　　}
　　if(pswd1　!== "" || pswd2　!== "") {
　　　　if(pswd1　!== pswd2}) {
　　　　　　alert("Password must be filled out");39;t.match(");
　　　　　　return false;　　　　　　
　　　　}
　　} else {
　　　　alert("Password must be filled out");
　　　　return false;　　
　　}
　　return true;
}
</script>

Typical validation tasks include:

• Did the user fill out all required fields?

• Did the user enter valid data?

In this code, if the input field (username) is empty, this function will display a warning message and return false to prevent the form from being submitted:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　}

The function can be called when submitting the form:

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">Name:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="Submit">
</form>

Validate numeric input

JavaScript is usually used to validate numeric input.

Please enter1to10between the numbers:

Validate email input

JavaScript is usually used to validate email addresses.

Please enter a valid email address:

Validate password confirmation

JavaScript is usually used to match password confirmation.

Automatic HTML form validation

HTML form validation can be usedRequiredAutomatically execute attribute:

<input type="text" name="demo" required>

Change Input Type

You can use javascript to switch between <input type="password"> and <input type="text">.

Enter a value in the password field and then click the 'Show Password' button:

HTML Input Validation Attributes

HTML5The following new HTML attributes have been introduced:

CSS Validation Pseudo-Selector

CSS3The following new CSS pseudo-selectors have been introduced:

Note:Client-side validation cannot replace or replace server-side validation. Even if the form data has been validated by the user, it should always be validated on the server side, because users can disable JavaScript in their browsers.