javascript - How to add email validation in bootstrap?

I am using bootstrap in my web page and trying to make a form on that page. I've used the standard classes of bootstrap for making the form. I've already used the validation to check the emptiness of the form. I just want to add the email and phone number validation further in my code. The code for the form and the and the already declared validation script is given below:

<script type="text/javascript">
function validateText(id) {
    if ($("#" + id).val() == null || $("#" + id).val() == "") {
        var div = $("#" + id).closest("div");
        div.removeClass("has-success");
        $("#glypcn" + id).remove();
        div.addClass("has-error has-feedback");
        div.append('<span id="glypcn' + id
           + '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
        return false;
    } else {
        var div = $("#" + id).closest("div");
        div.removeClass("has-error");
        $("#glypcn" + id).remove();
        div.addClass("has-success has-feedback");
        div.append('<span id="glypcn' + id
               + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
        return true;
    }
}

$(document).ready(function() {
    $("#contactButton").click(function() {
        if (!validateText("contactName")) {
            return false;
        }
        if (!validateText("contactEmail")) {
            return false;
        }
        if (!validateText("contactMobile")) {
            return false;
        }
        if (!validateText("contactAddress1")) {
            return false;
        }
        if (!validateText("contactCity")) {
            return false;
        }
        $("form#contactForm").submit();
    }
);
});

<form class="form-horizontal" id="contactForm">
<div class="form-group">
    <label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactName">
    </div>
</div>
<div class="form-group">
    <label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="contactEmail">
    </div>
</div>
<div class="form-group">
    <label for="contactMobile" class="col-sm-2 control-label">Mobile
        Number<sup>*</sup>
    </label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactMobile">
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress1"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress2"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
    <div class="col-sm-10">
        <select class="form-control" id="contactCity">
            <option>KURUKSHETRA</option>
            <option>PEHOWA</option>
            <option>KARNAL</option>
        </select>   
    </div>  
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <p>     
        <span id="helpBlock" class="help-block"><sup>*</sup> marked fields
            are compulsory!</span>
    </p>    
</div>
<div class="checkbox">
    <label> <input type="checkbox"> I agree to the <a href="#">Terms of
            Service</a>     
    </label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <center>
        <p>
            <button type="button" class="btn btn-primary btn-lg btn-block"
                id="contactButton">
                Submit <span class="glyphicon glyphicon-arrow-right"> </span>
            </button>
        </p>
    </center>
</div>
</form>

<script type="text/javascript">
function validateText(id) {
    if ($("#" + id).val() == null || $("#" + id).val() == "") {
        var div = $("#" + id).closest("div");
        div.removeClass("has-success");
        $("#glypcn" + id).remove();
        div.addClass("has-error has-feedback");
        div.append('<span id="glypcn' + id
           + '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
        return false;
    } else {
        var div = $("#" + id).closest("div");
        div.removeClass("has-error");
        $("#glypcn" + id).remove();
        div.addClass("has-success has-feedback");
        div.append('<span id="glypcn' + id
               + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
        return true;
    }
}

$(document).ready(function() {
    $("#contactButton").click(function() {
        if (!validateText("contactName")) {
            return false;
        }
        if (!validateText("contactEmail")) {
            return false;
        }
        if (!validateText("contactMobile")) {
            return false;
        }
        if (!validateText("contactAddress1")) {
            return false;
        }
        if (!validateText("contactCity")) {
            return false;
        }
        $("form#contactForm").submit();
    }
);
});

<form class="form-horizontal" id="contactForm">
<div class="form-group">
    <label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactName">
    </div>
</div>
<div class="form-group">
    <label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="contactEmail">
    </div>
</div>
<div class="form-group">
    <label for="contactMobile" class="col-sm-2 control-label">Mobile
        Number<sup>*</sup>
    </label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactMobile">
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress1"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress2"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
    <div class="col-sm-10">
        <select class="form-control" id="contactCity">
            <option>KURUKSHETRA</option>
            <option>PEHOWA</option>
            <option>KARNAL</option>
        </select>   
    </div>  
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <p>     
        <span id="helpBlock" class="help-block"><sup>*</sup> marked fields
            are compulsory!</span>
    </p>    
</div>
<div class="checkbox">
    <label> <input type="checkbox"> I agree to the <a href="#">Terms of
            Service</a>     
    </label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <center>
        <p>
            <button type="button" class="btn btn-primary btn-lg btn-block"
                id="contactButton">
                Submit <span class="glyphicon glyphicon-arrow-right"> </span>
            </button>
        </p>
    </center>
</div>
</form>

Share Improve this question edited Jun 4, 2016 at 18:29 David Newcomb 10.9k3 gold badges52 silver badges63 bronze badges asked Aug 10, 2015 at 10:36 Atul Mittal 1111 gold badge5 silver badges15 bronze badges

2 you can use regular expression object RegExp in javascript and use method test() to check email or phone no. is valid or not – Virendra Yadav Commented Aug 10, 2015 at 10:41

Add a comment |

2 Answers 2

Sorted by: Reset to default 8

You should use a regex like mentioned in the comment. The regex is also mentioned here.

var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;

Here is a working example.

you have to require additional plugin for this. Try this:

<form id="emailForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-7">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#emailForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    }
                }
            }
        }
    });
});
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add email validation in bootstrap? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)