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 ?

The way you are using for validation is not so good, I will recommend you to use Jquery validation plugin. — Nitin Dhomse
– Nitin Dhomse, Commented Dec 15, 2016 at 10:15
ok. but, how many times you can write if...else block and take manual efforts, if the plug-in is available. — Nitin Dhomse
– Nitin Dhomse, Commented Dec 15, 2016 at 10:22
You just have written some patterns and initialized them into usernameReg, mobnumReg and emailReg variables .. you need to apply them on the way of inputs. — Shafizadeh
– Shafizadeh, Commented Dec 15, 2016 at 12:47

Shafizadeh · Accepted Answer · 2016-12-15 13:09:26Z

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.

Boldewyn · Accepted Answer · 2016-12-15 13:11:29Z

0

@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.

answered Dec 15, 2016 at 13:11

Boldewyn

83.1k45 gold badges161 silver badges218 bronze badges

1 Comment

Shafizadeh Over a year ago

Good point ..! pattern is a great attribute in HTML5 ..! I like it ;-)

Collectives™ on Stack Overflow

jquery form validation with regex

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related