An easy way to display an error status after clicking the next button using javascript

Question

An easy way to display an error status after clicking the next button using javascript

Whenever I input an email address, it displays an error status.

I want the error status to appear after clicking the next button. In addition, I've included a "more view friends" link that, when clicked, will display one more textbox at each link.

Currently, the error status only shows up for the first 5 textboxes and does not work for other textboxes obtained by clicking the link.

However, in my jsfiddle link, the "invite more friends" link doesn't work, but on the webpage, it functions correctly.

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;            
}

Can anyone help me identify my mistake and suggest how to fix it? Thank you in advance.

javascript html css

Answer 1

Answer №1

Vinod provided the correct answer, however, there is an alternative approach:

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

The issue here is that you are generating elements that do not exist on the page yet, hence the event is not being attached.

To learn more about this, visit the jQuery on event

In addition, the following code snippet is inaccurate:

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

You must use double quotes:

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

Answer 2

Vinod provided the correct answer, however, there is an alternative approach:

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

The issue here is that you are generating elements that do not exist on the page yet, hence the event is not being attached.

To learn more about this, visit the jQuery on event

In addition, the following code snippet is inaccurate:

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

You must use double quotes:

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

Answer 3

Answer №2

The mistake that was made is in how the keyup event is registered:

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

While this method is acceptable, the issue lies in the fact that it only affects elements that already exist. To address this, you should use .on instead:

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

The key difference here is that outerSelector should target element(s) that currently exist, and the elements within them specified by innerSelector don't need to be present when the event is registered.

EDIT: Specifically addressing the problem at hand

Since there are bugs in your fiddle, I can't fully test it, but it seems like you should make this adjustment:

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

Answer 4

The mistake that was made is in how the keyup event is registered:

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

While this method is acceptable, the issue lies in the fact that it only affects elements that already exist. To address this, you should use .on instead:

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

The key difference here is that outerSelector should target element(s) that currently exist, and the elements within them specified by innerSelector don't need to be present when the event is registered.

EDIT: Specifically addressing the problem at hand

Since there are bugs in your fiddle, I can't fully test it, but it seems like you should make this adjustment:

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

Answer 5

Answer №3

It appears that your issue is with the validation only working for the first 5 input boxes and not for any dynamically added ones.

If this is the case, It seems like you are only attaching the event handler initially.

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

What you need 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 solution proves helpful to you.

Edit

Alternatively, you could simplify things by using the $(selector).on(); method. [answered by @Lajos Arpad]

For more information, please visit this link.

Answer 6

It appears that your issue is with the validation only working for the first 5 input boxes and not for any dynamically added ones.

If this is the case, It seems like you are only attaching the event handler initially.

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

What you need 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 solution proves helpful to you.

Edit

Alternatively, you could simplify things by using the $(selector).on(); method. [answered by @Lajos Arpad]

For more information, please visit this link.

Answer 7

Answer №4

When the next button is clicked, you need to validate by replacing:

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

with:

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

To enable the 'invite more friends' link to work, add an 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>');
});

Answer 8

When the next button is clicked, you need to validate by replacing:

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

with:

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

To enable the 'invite more friends' link to work, add an 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>');
});

Answer 9

Answer №5

Make sure you are validating the input box with every key up event, as this is a common mistake made.

Instead, consider validating on input when the next button is clicked.

Refer to the code snippet below at line number 11

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

This approach should work correctly

Sample

Answer 10

Make sure you are validating the input box with every key up event, as this is a common mistake made.

Instead, consider validating on input when the next button is clicked.

Refer to the code snippet below at line number 11

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

This approach should work correctly

Sample

Answer 11

Answer №6

Check out this code snippet:

        function validateInput() {
            var input = document.login.user.value;
            if (input == "" || input == null) {
                alert("Please enter a value");
                return false;
            }
        }

Here is a live demo

Answer 12

Check out this code snippet:

        function validateInput() {
            var input = document.login.user.value;
            if (input == "" || input == null) {
                alert("Please enter a value");
                return false;
            }
        }

Here is a live demo

An easy way to display an error status after clicking the next button using javascript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The AngularJS Navbar is Bootstrapped

Begin the ul element from the left-hand side

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

Issues with width transitions in Edge when using the ::after pseudo-element

Sending data via req.body from middleware

Preventing window resize from affecting print screen content in Angular 8

Encountering an error while attempting to run bcrypt on Meteor and Nodejs - "Undefined property '_handle'."

Are you feeling lost when it comes to Javascript? How is it possible for a boolean function to function as a

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Issue with the final transition of the last image in the Bootstrap carousel

I prefer the jumbotron to be uninterrupted by the navbar

How can one update transitive dependencies to a specific newer version in npm to address CVE vulnerabilities?

Ways to resolve the issue of setAttribute value not appearing on the UI

"Enhance your website with the powerful combination of SweetAlert

Optimize your bootstrap carousel for mobile viewing by ensuring that the image and text are

When I'm working on iPhone css hover effects, I find that I need to include a

Guide to incorporating rate-limiter-flexible into your current node.js express configuration

What could be causing the background image on my Jumbotron to fail to load?

Utilize Angular2's input type number without the option for decimal values