How to validate Form using JavaScript
Question
I'm trying to validate a forum sing js, but it doesn't work at all. I tried everything, I used get element and using the form id thing, but still it doesn't working.
this is the Code:
function check()
{
var name= document.getElemeentById('name');
var fname= document.insc.Prenom.value;
var gender=document.insc.gender;
var user = document.insc.user.value;
var phone=document.insc.tel.value;
var userT=document.insc.choice.selectedIndex;
var pwd=document.insc.pwd.value;
var email=document.insc.email.value;
//name
if (name.value ==null || name.value == '')
{
alert('name required');
document.insc.name.focus();
return false;
}
//la9ab
if (fname == null || fname =='')
{
alert('Family Name required');
document.insc.Prenom.focus();
return false;
}
//sexe
if (gender[0].checked = false || gender[1].checked= false)
{
alert('pick your Gender');
return false;
}
//user
if (user == null || user=='')
{
alert('user required');
document.insc.user.focus();
return false;
}
//phone
if (isNotNum(phone) && phone =='' && phone.length==8)
{
alert('Phone number required');
document.insc.tel.focus();
return false;
}
//pasword
if (pwd =='' && pwd.length<=8 )
{
alert('password too short');
document.insc.pwd.focus();
return false;
}
//user type
if (userT[0] || userT='')
{
alert('select user type');
document.insc.choice.focus();
return false;
}
var atpos =email.indexOf('@');
var dotpos =email.lastIndexOf('.');
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert('email is wrong');
document.insc.choice.focus();
return false;
}
}
</script>
<title>Inscription</title>
</head>
<body>
<form action="/" method="GET" name="insc" id="form" onsubmit="return check();">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label for="Pname">Family Name </label>
<input type="text" id="Pname" name="Prenom" >
</div>
<div >Birthday Date</div>
<div >
<input type="Date" name="date" id="date">
</div>
<div>
<label for="Gender" >Sexe</label>
<input type="radio" name="gender" id="H" value="Men" >Men
<input type="radio" name="gender" value="Female" id="F" >Woman
</div>
<div>
<label for="User">User Name</label>
<input type="text" id="User" name="User">
</div>
<div >
<label for="tel">phone</label>
<input type="text" id="tel" name="tel">
</div>
<div>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" >
</div>
<div>
<label for="Pwd">Password</label>
<input type="Password" id="pwd" name="pwd">
</div>
<div >
<label for="choice">User Type</label>
<select id="choice" name="choice" >
<option selected></option>
<option value="client">client</option>
<option value="provider">provider</option>
</select>
</div>
<button type="Submit" name="Envoyer" value="Envoyer" >Send</button>
<input type="button" name="Delete" value="Delete" onclick="rform(); return false">
</form>
</body>
</html>
please help me to make it work because i stuck on these and i want to move on so i can progress in my own work thanks in advance
1 answers
solution1
0 2019-08-16 08:20:10
Couple of things you have to check:
-
HTMLformvalidation is used by you with acceptable value patterns. This works without anyJavascript. Why do you want to do custom validation? - Having said that, you may still want to perform some custom validations. So, there is a case for that.
- To switch off
HTMLformvalidation informusenovalidate. In that case, you have to rely on custom validation. Otherwise, both defaultHTMLformvalidation and custom validations will take place. - In
check()function access values usingdocument.getElementById('id').valueordocument.getElementsByName('name')
Here is your modified code where I have turned off default form validation (you may turn it on by removing novalidate from form .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Click Events</title> <script> function check() { var name = document.getElementById('name').value; var fname = document.getElementById("Pname").value; var gender = document.getElementsByName("gender"); var user = document.getElementById("User").value; var phone = document.getElementById("tel").value; var userT = document.getElementById("choice").selectedIndex; var pwd = document.getElementById("pwd").value; var email = document.getElementById("email").value; //name if (name == undefined || name == '') { alert('name required'); document.insc.name.focus(); return false; } //la9ab if (fname == undefined || fname == '') { alert('Family Name required'); document.insc.Prenom.focus(); return false; } //sexe if (gende = undefined || (gender[0].checked == false && gender[1].checked == false)) { alert('pick your Gender'); return false; } //user if (user == undefined || user == '') { alert('user required'); document.insc.user.focus(); return false; } //phone if (phone == undefined || phone == '' || phone.length != 8) { alert('Phone number required'); document.insc.tel.focus(); return false; } //pasword if (pwd == undefined || pwd == '' || pwd.length < 8) { alert('password too short'); document.insc.pwd.focus(); return false; } //user type if (userT == undefined || userT == '' || userT == 0) { alert('select user type'); document.insc.choice.focus(); return false; } if (email == undefined || email == '') { alert('email is required'); return false; } var atpos = email.indexOf('@'); var dotpos = email.lastIndexOf('.'); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) { alert('email is wrong'); document.insc.choice.focus(); return false; } } </script> </head> <body> <form action="/" method="GET" name="insc" id="form" onsubmit="return check(); return false;" novalidate> <div> <label for="name">Name</label> <input type="text" id="name" name="name" required pattern="[a-zA-Z]{3-12} "> </div> <div> <label for="Pname">Family Name </label> <input type="text" id="Pname" name="Prenom" required pattern="[a-zA-Z]{3-12} " maxlength="12"> </div> <div>Birthday Date</div> <div> <input type="Date" name="date" id="date" required max="12-31-2011" min="12-31-1960"> </div> <div> <label for="Gender">Sexe</label> <input type="radio" name="gender" id="H" value="Men" required>Men <input type="radio" name="gender" value="Female" id="F" required>Woman </div> <div> <label for="User">User Name</label> <input type="text" id="User" name="User" pattern="[a-zA-Z]{3-12}" maxlength="12" required> </div> <div> <label for="tel">phone</label> <input type="text" id="tel" name="tel" pattern="[0-9]{8}" maxlength="8" required> </div> <div> <label for="email">E-mail</label> <input type="email" id="email" name="email" required> </div> <div> <label for="Pwd">Password</label> <input type="Password" id="pwd" name="pwd" pattern="[a-zA-Z0-9/*.!:;, ?.]{3-15}" maxlength="15" required> </div> <div> <label for="choice">User Type</label> <select id="choice" name="choice" required> <option selected></option> <option value="client">client</option>ß <option value="provider">provider</option> </select> </div> <button type="Submit" name="Envoyer" value="Envoyer">Send</button> <input type="button" name="Delete" value="Delete" onclick="rform(); return false"> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to validate form using JavaScript?
how to correctly validate a form using javascript .?
How to Validate form by using OnChange Javascript HTML
How to validate form using if statement javascript in angular
How To Validate Form Field Using Javascript
How to validate my form using javascript in docpad
How to validate form using several functions in javascript
Using JavaScript to validate a HTML form
Validate form with checkboxes using Javascript
Validate a PHP form using javascript
Related Tags