I have to do this in JavaScript, and I dont know how. Can someone please help me
ID: 664102 • Letter: I
Question
I have to do this in JavaScript, and I dont know how. Can someone please help me?
Take the form you created in assignment 3 and put a copy of it into a new file. You can also create an entirely new form if you would like. Use JavaScript to perform client-side validation on at least three fields with the following specifications:
a)Validate a field for minimum length
b)Validate another field for both minimum length and numeric or alpha characters only
c)Validate an email address that must be in a valid email format
The form should not be permitted to submit unless all fields pass validation.
Thank you.
Explanation / Answer
<table cellpadding="5" cellspacing="10">
<form action="" method="post" name="reg_form">
<tr>
<td>Name:</td>
<td><input name="" type="text" id="name"/><br/>
<label class="error" id="error_name"></label>
</td>
</tr>
<tr>
<td>Username:</td>
<td><input name="" type="text" id="username"/><br/>
<label class="error" id="error_username"></label>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input name="Input2" type="password" id="key"/>
<br/>
<label class="error" id="error_key"></label>
</td>
</tr>
</tr>
<tr>
<td>Repassword:</td>
<td><input name="Input2" type="password" id="confirm_key"/>
<br/>
<label class="error" id="error_confirm"></label>
</td>
</tr>
<tr>
<td>Parentage:</td>
<td><input name="Input2" type="text" id="parentage"/>
<br/>
<label class="error" id="error_parentage"></label>
</td>
</tr>
<tr>
<td>Tel No:</td>
<td><input name="Input2" type="text" id="telnumber"/>
<br/>
<label class="error" id="error_telnumber"></label>
</td>
</tr>
<tr>
<td>email:</td>
<td><input name="Input2" type="text" id="useremail"/>
<br/>
<label class="error" id="error_useremail"></label>
</td>
</tr>
<tr>
<td>Address:</td>
<td><input name="Input2" type="text" id="useraddress"/>
<br/>
<label class="error" id="error_useraddress"></label>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<div id="SButton">
<input name="Input" type="submit" value="Sign Up" id="SButton"/>
</div> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</form>
</table>
</body>
</html>
<script type="text/javascript">
function SubmitFun(){
var name = document.getElementById('name').value;
var username = document.getElementById('username').value;
var pass = document.getElementById('key').value;
var repass = document.getElementById('confirm_key').value;
var tel = document.getElementById('telnumber').value;
var validemailformat = /^[a-z._0-9]{3,100}@[a-z0-9.]{2,100}.[a-z]{2,3}$/;
var email = document.getElementById('useremail').value;
if(name != ""){
if(name.match(/^([A-Z ]{3,40}$)/i)){
document.getElementById('error_name').innerHTML = "";
if(username != ""){
if(!username.match(/^([A-Z0-9.]{6,10}$)/i)){
document.getElementById('error_username').innerHTML = "Username contais invalid characters";
document.getElementById('username').focus();
return false;
}
else{
document.getElementById('error_username').innerHTML = "";
if(pass != ""){
if(pass.length >=6){
if(pass.match(/^([a-z0-9#@!* ]{6,100}$)/i)){
if(repass == pass){
if(tel.length != 10){
document.getElementById('error_telnumber').innerHTML = "Mobile number can not be less than or more than 10 digits";
return false;
}
else{
if(tel.match(/^([0-9]{10}$)/)){
if(validemailformat.test(email)){
return true;
}
else{
document.getElementById('error_useremail').focus();
document.getElementById('error_useremail').innerHTML = "Please Enter a Valid Email";
return false;
}
}
else{
document.getElementById('error_telnumber').innerHTML = "Mobile number contains invalid characters";
document.getElementById('telnumber').focus();
return false;
}
}
}
else{
document.getElementById('confirm_key').focus();
document.getElementById('error_confirm').innerHTML = "Passwords should match";
return false;
}
}
else{
document.getElementById('key').focus();
document.getElementById('error_key').innerHTML = "Password can contain specail characters and should be minimum 6 chars long";
return false;
}
}
else{
document.getElementById('key').focus();
document.getElementById('error_key').innerHTML = "Password should be minimum 6 chars long";
return false;
}
}
else{
document.getElementById('key').focus();
document.getElementById('error_key').innerHTML = "Please Choose a Password!";
return false;
}
}
}
else{
document.getElementById('username').focus();
document.getElementById('error_username').innerHTML = "Please Enter a Valid Username";
return false;
}
}
else{
document.getElementById('name').focus();
document.getElementById('error_name').innerHTML = "Only alphabets allowed in the name field";
return false;
}
}
else{
document.getElementById('name').focus();
document.getElementById('error_name').innerHTML = "Please Enter Your Name!";
return false;
}
}
</script>