How to show particular textbox border red color if i enter invalid email or blank in javascript?

Question

I have been created four email textboxes and also "more" link.

If i click more link, it shows one more textbox at each link.

Now i am struggling with show error status when i enter invalid email or blank field. Here is my code:

<input onclick="ValidateEmail()" style="float:right;" id="nextbutton" name="" type="submit" value="Next" />

Javascript:

var container = $(document.createElement('div')).css({
            padding: '5px', margin: '0'});

        $(container).append('<input type=text class="input" id="tb1" placeholder="Email" />');
        $(container).append('<input type=text class="input" id="tb2" placeholder="Email" />');
        $(container).append('<input type=text class="input" id="tb3" placeholder="Email" />');
        $(container).append('<input type=text class="input" id="tb4" placeholder="Email" />');
        $('#main').before(container);   // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.

        var iCnt = 4;

    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("tb1").value;
                if (!IsValidEmail(email)) {
                    document.getElementById('tb1').style.border = "solid 1px red";
                  return false;
            }

I need to show red color textbox, in which particular filed is blank or invalid email.

May i know, how can i achieve this one?

Answer 1

You can use JQuery's keyup() method on the inputs to validate the emails every time any char is entered or removed. If a specific email is invalid, add a css class invalid to its parent div (put every input in a separate div ) and then you can color all inputs red that are children from a div marked as invalid ( .invalid input ). You may also add labels next to each input that are displayed only when their parent div is marked as invalid. These labels then contain an error message.

See jsfiddle example.

HTML-Code:

<div id="main"></div>
<input id="nextbutton" name="" type="submit" value="Next" />

CSS:

.invalid input {
    background-color:#fee;
    border:1px solid red;
}
.invalid label {
    display:inline-block;
}

input {
    margin:5px;
    padding:2px;
    border:1px solid green;
}
label {
    display:none;
}

JavaScript:

var container = $(document.createElement('div')).css({
            padding: '5px', margin: '0'});

// add several <div><input ...><label>...</label></div>
for (i = 0; i < 5; i++) {
    $(container)
        .append('<div><input type="text" class="input" id="tb'+i+'" placeholder="Email" /> <label>This email is invalid</label></div>');
}

$('#main').before(container);   // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.

// Validate input on every keyup()-event
$("input", container).keyup(function() {
    validateEmail($(this));
});

var iCnt = 4;

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(el) {
    if (!isValidEmail($(el).val())) {
        $(el).parent().addClass('invalid');
        return false;
    } else {
        $(el).parent().removeClass('invalid');
        return true;
    }
}