CODEWITHSUNDEEP
javascriptjqueryfunctionvalidation
Jimmy
Jimmy

Reputation: 12487

Add input value check on button press

This is the code I'm working with: http://jsfiddle.net/9sX6X/21/

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

I want to stop fields being added if there is nothing in the input box when the add button is pressed, so for example I would like to have an alert come up when the user clicks add and there is nothing in the box.

I think it's something like this but I am new to javascript:

if { val == null
alert("Nothing to be added");
}

Could anyone show me how to implement this check in my current code please?

Upvotes: 2

Views: 298

Answers (7)

stackErr
stackErr

Reputation: 4170

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        if (value == "") {
            alert("No input");
        }
        else{
        var html = '<div class="line">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
       }
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

Upvotes: 1

0x_Anakin
0x_Anakin

Reputation: 3269

working demo: http://jsfiddle.net/9sX6X/28/

inside your first if statement check the length of the input with:

if($.trim(value) != '')

Change your code to this:

var container = $('.copies');
    value_src = $('#current');
    maxFields = 10;
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {

        var value = value_src.val();
        if($.trim(value) != ''){
            var html = '<div class="line">' +
                '<input class="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields++;
        }else{
            alert('Field empty!');
        }
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

Upvotes: 1

MrCode
MrCode

Reputation: 64526

The condition could be:

if ($.trim(value_src.val()) != '') {

This is comparing the value to '' which is a blank string. It also uses jQuerys $.trim() to remove any whitespace from the beginning and end of the value so that if the value only contains whitespace then it won't pass the check.

Fiddle

Added to your code, it would look like:

if ($.trim(value_src.val()) != '') {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
} else {
    alert("You didn't enter anything");
}

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

Since your default value is add, a simple check will do the trick:

if (this.value == "Add" || this.value == "") {
    alert("empty!");
    return false;
}

Demo: http://jsfiddle.net/9sX6X/24/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

var value = $.trim(value_src.val());
if(!value){
    alert('empty');
    return;
}

Ex:

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = $.trim(value_src.val());
        if(!value){
            alert('empty');
            return;
        }

        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
.on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

Demo: Fiddle

Upvotes: 1

RMalke
RMalke

Reputation: 4094

Here's the JsFiddle, based in yours

The added part is:

if ($('#current').val().length <= 0) {
    alert("Nothing to be added");
    return;        
}

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

if ($.trim(value) != "") {
      var html = '<div class="line">' +
          '<input class="accepted" type="text" value="' + value + '" />' +
          '<input type="button" value="X" class="remove" />' +
          '</div>';

      $(html).appendTo(container);
      value_src.val('');
      currentFields++;
}
else{
     alert("no value")
}

Demo ---> http://jsfiddle.net/9sX6X/23/

Upvotes: 1

Related Questions