CODEWITHSUNDEEP
javascriptjqueryvalidation
Dhaval
Dhaval

Reputation: 59

how do I check email validaton?

I make wizard on click next button not check validate email using regular expression. I have use switch case first blank input to show the error otherwise go to next step and after add email input value wrong to not check email this value in Reg how to solve this problem.

<form>
  <div class="form-main">
    <div class="form-input">
      <input type="text" id="fname" placeholder="First Name">
      <p id="error"></p>
    </div>
    <div class="form-input">
      <input type="text" id="lname" placeholder="Last Name">
      <p id="error"></p>
    </div>
    <div class="form-input">
      <input type="email" id="email" placeholder="Email">
      <p id="error"></p>
    </div>
    <div class="form-input">
      <input type="password" id="password" placeholder="Password">
      <p id="error"></p>
    </div>
    <div class="form-btn">
      <button type="button" id="prev" onClick="prevBtn(this);">prev</button>
      <button type="button" id="next" onClick="nextBtn(this);">next</button>
      <button type="submit" id="submit">submit</button>
    </div>
  </div>
</form>

First I make variable for RegEx in make a function emailValidate name and in this function take a variable mailFormate this return text email. This function used in switch case in take a condition input value blank if show error and otherwise check input type text and email but email is blank if show error when add email format wrong to not check the RegEx skip the next step how to solve this problem.

    $(window).on('load',function(){
        $('.form-main > .form-input:nth-child(1)').addClass('open');
        $('.form-main > .form-input:not(".open")').addClass('close').hide();    
    });

    var $div = $('.form-input');
    var submits = $('#submit').css('display','none');
    index = 0;

    function updateStatus(a){
        $div.eq(index).removeClass('current').addClass('close').hide();
        index += a; 
        $div.eq(index).addClass('current').removeClass('close').show();

        $('#next').toggle((index !==$div.length-1));
        $('#prev').toggle(index !== 0); 

        if(index == ($div.length - 1)){
            submits.toggle(index !== 0);
        }else{
            submits.hide();
            }
    }

    var input = document.getElementsByTagName('input');
    var error = document.getElementById('error');

    var regEx = {
        emailValidate : function emailValidate(email){
        var mailFormate = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return mailFormate.test(email);
        }
    }


    function validation(){
        var inputValue = $('input:visible').val();
        var inputType = $(input).attr('type');  

        if(inputValue !== ''){  
        switch(inputType){
            case 'text' :{
                updateStatus(+1);
            }

            case 'email' :{
                var email = regEx.emailValidate(inputValue);
                    if(!email){
                        error.innerHTML = "please enter valid mail";
                        return false;
                    }else{
                        error.innerHTML = "valid";
                        updateStatus(+1);
                    }
                    break;
                }
                default : '';
            }

        }else{
            $('input:visible').next().html("please enter the value");
            }
    }

    function nextBtn(){
        validation();
    }

    function prevBtn(){
        updateStatus(-1);
        error.innerHTML = '';
    }

Upvotes: 0

Views: 113

Answers (2)

Jok3r
Jok3r

Reputation: 496

<!DOCTYPE html>
<html>
<head>
   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
</head>
<body>

<form data-toggle="validator" role="form"> 
 
                                <div class="form-group has-feedback">
                                    <label for="Email" class="control-label"><b>Email</b></label>
                                    <input type="text" class="form-control" id="umail"  data-minlength="5" placeholder="Email" name="umail" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"  required>
                                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                    <div class="help-block with-errors"></div>
                                </div>
                            <input type="submit">
</form>


</body>
</html>

try this. this is done using bootstrap validator plug-in

Upvotes: 1

Jok3r
Jok3r

Reputation: 496

<!DOCTYPE html>
<html>
<body>

<form>
 Email: <input type="email" name="country_code" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" >
  <input type="submit">
</form>


</body>
</html>

try this,

Upvotes: 0

Related Questions