jquery form validation with regex
Question
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var usernameReg=/^[a-zA-Z ]$/;
var mobnumReg=/^[0-9]$/;
var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var errors=false;
if($('#username').val()==''){
$('#username').after('<span class="errors">missing name</span>');
errors=true;
}
if($('#mobnum').val()==''){
$('#mobnum').after('<span class="errors">missing number</span>');
errors=true;
}
if($('#mail').val()==''){
$('#mail').after('<span class="errors">missing mail</span>');
errors=true;
}
if($('#pwd').val()==''){
$('#pwd').after('<span class="errors">missing password</span>');
errors=true;
}
if($('#addr1').val()==''){
$('#addr1').after('<span class="errors">missing address</span>');
errors=true;
}
if($('#addr2').val()==''){
$('#addr2').after('<span class="errors">missing address</span>');
errors=true;
}
if(errors==true){
return false;
}else{
return true;
}
}); });
</script>
</head>
<body>
<form method="post" id="user_form">
NAME <br>
<input type="text" name="username" id="username" class="req" ><br>
MOBILE NUMBER <br>
<input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br>
E-MAIL <br>
<input type="email" name="mail" id="mail" class="req" ><br>
PASSWORD <br>
<input type="password" name="pwd" id="pwd" class="req" ><br>
ADDRESS 1<br>
<input type="text" name="addr1" id="addr1" class="req" ><br>
ADDRESS 2<br>
<input type="text" name="addr2" id="addr2" class="req" ><br>
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
hi.. i have written code for jquery form validation with regex... here error message displayed only for incorrect email..if i type incorrect user name and mobile number it should show error message .... how to add pattern for that ?
2 answers
solution1
1 2016-12-15 13:01:40
As I've mentioned in the comments, you should apply your patterns on the way of inputs. Try this:
$(document).ready(function(){ $("#submit").click(function(){ var usernameReg=/^[a-zA-Z ]$/; var mobnumReg=/^[0-9]$/; var emailReg=/^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/; var username = $('#username').val(), mobnum = $('#mobnum').val(), mail = $('#mail').val(); var errors=false; if(username == '' || !usernameReg.test(username)){ $('#username').after('<span class="errors">missing name</span>'); errors=true; } if(mobnum == '' || !mobnumReg.test(mobnum)){ $('#mobnum').after('<span class="errors">missing number</span>'); errors=true; } if(mail == '' || !emailReg.test(mail)){ $('#mail').after('<span class="errors">missing mail</span>'); errors=true; } if($('#pwd').val()==''){ $('#pwd').after('<span class="errors">missing password</span>'); errors=true; } if($('#addr1').val()==''){ $('#addr1').after('<span class="errors">missing address</span>'); errors=true; } if($('#addr2').val()==''){ $('#addr2').after('<span class="errors">missing address</span>'); errors=true; } if(errors==true){ return false; }else{ return true; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <form method="post" id="user_form"> NAME <br> <input type="text" name="username" id="username" class="req" ><br> MOBILE NUMBER <br> <input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br> E-MAIL <br> <input type="email" name="mail" id="mail" class="req" ><br> PASSWORD <br> <input type="password" name="pwd" id="pwd" class="req" ><br> ADDRESS 1<br> <input type="text" name="addr1" id="addr1" class="req" ><br> ADDRESS 2<br> <input type="text" name="addr2" id="addr2" class="req" ><br> <button type="submit" id="submit">Submit</button> </form>
Noted that you may want to improve your error messages. missing name isn't enough anymore. You should say: either missing name or wrong pattern .
solution2
0 2016-12-15 13:11:29
@Shafizadeh fixed your code just fine. Just a remark: You can do that validation also in HTML alone. Required fields:
<input name="username" required>
Fields matching a pattern:
<input name="mobnum" type="tel" pattern="[0-9]+">
Basically all modern browsers do support these features nowadays. If you need some level of interoperability , though, I've written a library, Hyperform , that makes sure these properties work as far back as IE 10.
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.