CODEWITHSUNDEEP
javascripthtmlcss
pcs
pcs

Reputation: 1854

How to show error status after click the next button in javascript?

It show error status when I am typing email address,

I need to show error status after click the next button, and also I added "more view friends" link, I set when I click "more view friends" link, it will show one more textboxes at each link.

Now the error status show only first 5 textboxes.. and it didn't work other textboxes which is got by clicked link.

But in my jsfiddle link, "invite more friends" link didnt work, but in webpage it works fine.

javascript:

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

            for (i = 0; i < 4; i++) {
                $(container)
                    .append('<div><input type="text" class="input" id="tb'+i+'" placeholder="Email" /></div>');
                    }    
            $('#main').before(container);   

            $("input", container).keyup(function() {
                    validateEmail($(this));
                });
        var iCnt = 4;        
                function validateEmail(el) {
            if (!isValidEmail($(el).val())) {
        $(el).parent().addClass('invalid');
        return false;
            } else {
        $(el).parent().removeClass('invalid');
        return true;
            }
        }          

    });    

    var divValue, values = '';
    function GetTextValue() {

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

            values += this.value.trim();
        }
    });

         document.all.contact_list.value = values;            
    }

May i know, what is my mistake, how to fix this? thanks in advance.

Upvotes: 0

Views: 571

Answers (6)

Rob Scott
Rob Scott

Reputation: 8049

Vinod's answer is correct, but you can do it a different way:

$("#main").on('keyup', 'input', function() {
    validateEmail($(this));
});

What's happening is you're creating elements that haven't been on the page yet, and therefore the event isn't being attached.

See more on the jQuery on event

Also this is incorrect:

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

You need to have double quotes

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

Upvotes: 3

Vinod Kumar
Vinod Kumar

Reputation: 981

If I understand you correctly, your problem is that the validation works only for the first 5 input boxes and does not work for the dynamically added input boxes.

If so, You seem to bind event handler only initially.

$("input", container).keyup(function() {
    validateEmail($(this));
});

What you have to do is,

...
$('#btAdd').click(function() {
if (iCnt <= 19) {
    iCnt = iCnt + 1;
    // ADD TEXTBOX.
    var newTextbox = $('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');
    $(container).append(newTextbox);
    newTextbox.keyup(function() { //<<<< Bind keyUp for newly created textboxes also.
        validateEmail($(this));
    });
...

I hope this helps you.

Edit

On the other hand to make things easier you could simply use $(selector).on(); method. [answered by @Lajos Arpad]

for more details refer link

Upvotes: 2

Omar Elawady
Omar Elawady

Reputation: 3350

to validate on next button click.hust replace:

$("input", container).keyup(function() {
     validateEmail($(this));
});

by:

$("#form").submit(function() {
    var inputs=$('.input');
    for(i=0;i<inputs.length;i++)validateEmail(inputs[i]);
    if($('.invalid').length!==0)return false;
});

to make 'invite more friends' link work add event handler.

$('#btAdd').click(function(){
    $(container).append('<div><input type="text" class="input" id="tb'+($('.input').length+i)+'" placeholder="Email" /> <label>This email is invalid</label></div>');
});

Upvotes: 1

hari haran
hari haran

Reputation: 127

Try this code it may help you:

        function myfun() {
            var a = document.login.user.value;
            if (a == "" || a == null) {
                alert("u got it");
                return false;
            }
        }

This is a DEMO fiddle

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76551

The mistake is that you register keyup like this:

    $("input", container).keyup(function() {
            validateEmail($(this));
        });

This style, in itself is OK, but the problem is that this affects only elements, which are already existent. You need to use .on, like this:

$(outerSelector).on('keyup', innerSelector, function(ev){
    // stuff happens
});

The point is that outerSelector should point to element(s), which is/are already existent and the elements inside them, in conform to innerSelector are not needed to exist in the moment when you register the event.

EDIT: Addressing the particular problem

Since your fiddle has bugs, I cannot really test it, but intuitively, it seems that you should make this change:

container.on('keyup', "input", function(ev){
    validateEmail($(this));
});

Upvotes: 2

Shamse Alam
Shamse Alam

Reputation: 1315

you are validation input box on every key up event this is the mistake you have done.

You should validate on input on click event on next button

Use following code at line no 11

$("#nextbutton").click(function() {    
   var inputs=$('.input');
for(i=0;i<inputs.length;i++)
   validateEmail(inputs[i]);
});

it will work properly

Sample

Upvotes: 1

Related Questions