Design HTML Form in javascript Apply the data validation : 1. Mobile number field data must be a numeric data and not less than 8 digits, 2. The email field must accept the data which must contain the character '@' and dot (.). And the character @ must not be the first character and the last dot must at least be one character after the @. On submitting the form, If all these validations are followed, another Html page.
Design HTML Form in javascript
Apply the data validation :
1. Mobile number field data must be a numeric data and not less than 8 digits,
2. The email field must accept the data which must contain the character '@' and dot (.). And
the character @ must not be the first character and the last dot must at least be one
character after the @.
On submitting the form, If all these validations are followed, another Html page.
HTML form,
To validate the Mobile number and Email field data using JavaScript.
The Mobile number field data
- must be numeric data.
- cannot be less than 8 digits.
The Email field data
- must contain the character '@' and dot (.).
- the character @ must not be the first character.
- the last dot must at least be one character after the @.
Validate empty field on submitting the data.
When all the validations are followed then display a message as your data is submitted successfully.
HTML Form
<html>
<head>
<title></title>
<!-- javascript validation for submitting empty field -->
<script src = "mobileEmailValidate.js"></script>
</head>
<body>
<fieldset>
<!-- Form redirect to the confirmation.html web page -->
<form action = "confirmation.html" name = "checkMobileEmail" onsubmit = "return validateForm()" method = "post">
<fieldset>
<legend>HTML Form </legend>
<!-- input type for mobile number -->
<div>
<label>Mobile number:</label>
<input type = "text" name = "mobile" minlength = "8" >
</div>
<!-- input type for email -->
<div>
<label>Email:</label>
<input type = "text" name = "email" >
</div>
</fieldset>
<!-- Submit Button -->
<input type = "submit" value = "submit" onclick = "EmailValidation(document.checkMobileEmail.email)" onclick = "NumberValidation(document.checkMobileEmail.mobile)">
</form>
</fieldset>
</body>
</html>
confirmation.html web page
<html>
<body>
<h1> your data is submitted successfully. </h1>
</body>
</html>
Step by step
Solved in 6 steps with 5 images
