Javascript Email Validation For Multiple Text Boxes

December 15, 2022 Post a Comment

I have been created simple asp page, I have been created 4 email textboxes and 'add more' link in the form. If i click the 'more link', it displayed one more email textboxes at eac

Solution 1:

Hi you can add red border using this class CSS

.red-border{
    border: 1px solid red;
}

and in JS you check validation of class (eg 'email-input') and add error status like below.

if(!IsValidEmail)
 {
    $(this).addClass("red-border");
    $(this).focus();
 }else
 {
   $(this).removeClass("red-border");
 }

EDIT: Add a class named 'email-input' for all for email input boxes

function IsValidEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
} 
function ValidateEmail() {
    /*var email = document.getElementById("").value;*/
    var emailInputs = document.getElementsByClassName("email-input");
    for(i = 0 ; i<emailInputs .length;i++)
    {
       if(IsValidEmail(emailInputs[i].value))
       {$(this).removeClass("red-border");}
       else
       {$(this).addClass("red-border");}}
}

EDIT : your complete working code as you wanted:

<!DOCTYPE html>
<html>
<head>
<style>
.red-border{
    border: 1px solid red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

    // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
    var container = $(document.createElement('div')).css({
        padding: '5px', margin: '0'});

    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $('#main').before(container);   // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.
//document.body.appendChild(container);
    var iCnt = 4;

    $('#btAdd').click(function() {
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

            // ADD TEXTBOX.

            $(container).append('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');

            $('#main').before(container);   // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
        }
        else {      // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)

            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');

        }
    });

    $('#btRemove').click(function() {   // REMOVE ELEMENTS ONE PER CLICK.
        if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

        if (iCnt == 0) { $(container).empty(); 

            $(container).remove(); 
            $('#btSubmit').remove(); 
            $('#btAdd').removeAttr('disabled'); 
            $('#btAdd').attr('class', 'bt') 

        }
    });

    $('#btRemoveAll').click(function() {    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.

        $(container).empty(); 
        $(container).remove(); 
        $('#btSubmit').remove(); iCnt = 0; 
        $('#btAdd').removeAttr('disabled'); 
        $('#btAdd').attr('class', 'bt');

    });
});

// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';

function GetTextValue() {

    $(divValue).empty(); 
    $(divValue).remove(); values = '';
    $('.input').each(function() {
        divValue = $(document.createElement('div')).css({
            padding:'5px', width:'200px'
        });
 if(this.value.trim() != ''){
        if(values != ''){
            values += ',';
        }
        values += this.value.trim();
    }
});

     document.all.contact_list.value = values;            
}

function IsValidEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
} 

function ValidateEmail() {
    var emailInputs = document.getElementsByClassName("email-input");


    for(i = 0 ; i<emailInputs.length;i++)
    {
       if(IsValidEmail(emailInputs[i].value))
       {$(emailInputs[i]).removeClass("red-border");}
       else
       {$(emailInputs[i]).addClass("red-border");}
    }

}


</script>


</head>
<body>
<div id="main"></div>
<p>Hover the mouse pointer over this paragraph.</p>
<td valign="top" class="invite_footer">
<button id="btAdd">add</button>
<button id="btRemove">remove</button>
<button id="btRemoveAll">removeAll</button>
<input onclick = "ValidateEmail()"  style="float:right;" id="nextbutton" name="" type="button" value="Next" />
</td>
</body>
</html>

JavaScript Controls

Javascript Email Validation For Multiple Text Boxes

Solution 1:

Post a Comment for "Javascript Email Validation For Multiple Text Boxes"