CODEWITHSUNDEEP
jquery
n92
n92

Reputation: 7602

How to avoid duplicate values of input text boxes using jquery

I have N text boxes ,the values will be set on autofill ,so i dont want duplicate value How to do this in jquery

Upvotes: 2

Views: 7978

Answers (4)

user11354809
user11354809

Reputation: 1

  var Arrseq = $.grep(dataAdd, function (v) {
            return (v.Sequence == $(this).find("td[ctype=Slno]").text());

        });
        if (Arrseq.length > 0)
        {
            alert('Dublicate Entry !');
            return false;
        }

Upvotes: 0

frictionlesspulley
frictionlesspulley

Reputation: 12368

I have made a small jsfiddle example to show the validation.
Since there are N input text boxes I would use a class unique to identify the input which need to unique.
On submit I iterate over these inputs and on finding the first duplicate terminate further search. Downside of this search is that it would need to keep an array of all the values or iterate over the inputs twice ( you would be a better judge of what to use depending upon the requirement)

$(function(){
    $('#uniqueform').submit(function(evt){
        evt.preventDefault();
        var hashTable=new Array();
        var valid =true;
        $('input.unique','#uniqueform').each(function(index,item){
            $('.error').hide();  
            $('.success').hide();   
            var itemVal =$(item).val();

            if($.inArray(itemVal,hashTable)==-1)
            {
                hashTable.push(itemVal);
            }
            else{
                valid=false;   
                return false;
            }
        });
        if(valid)
        {
            $('.success').show();  
        }else{
            $('.error').show();
        }
    });

});

Hope this helps

Upvotes: 0

Nathan
Nathan

Reputation: 12000

You can use this nice little script that I just made:

<script type="text/javascript">
$(document).ready(function() {
    $('#field1').blur(function() {
        if ($(this).val() == $('#field2').val() || $(this).val() == $('#field3').val()) {
            $('#field1').stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">Please enter different text</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');
        }
    });
    $('#field2').blur(function() {
        if ($(this).val() == $('#field1').val() || $(this).val() == $('#field3').val()) {
            $('#field2').stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">Please enter different text</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');
        }
    });
    $('#field3').blur(function() {
        if ($(this).val() == $('#field1').val() || $(this).val() == $('#field2').val()) {
            $('#field3').stop(false,true).after('&nbsp;&nbsp;<span style="color:red;" class="error">Please enter different text</span>');
            $('.error').delay(600).fadeOut();
            $(this).val('');
        }
    });
});
</script>

And then the HTML, you can use your current HTML as long as they each have an ID that matches with the IDs in the script:

<form id="form1">
    Enter some text: <input type="text" id="field1" />

    <br /><br />

    Enter some text: <input type="text" id="field2" />

    <br /><br />

    Enter some text: <input type="text" id="field3" />

</form>

It has nice fade effects for the errors and everything.

Check it out in action here: http://jsfiddle.net/zHJSF/

Try filling the first one with some text and then the next with the same and you'll receive a nice little error on the side and they automatically fade out so it wont build up a bunch of errors.

I hope this helps.

Upvotes: 2

theprogrammer
theprogrammer

Reputation: 2734

I assume you are asking before the form is submitted, so you have some options. One is use Jquery.validator and write some rules to check for that.

See: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The other will be to attach some javascript to submit event of the form to check for that. Something like this:

$('#formid').submit(function (evt) {

   var input1 = $('#input1id').val();
   var input2 = $('#input2id').val();
   var input3 = $('#input3id').val();

   if (input1 === input2 || input2 === input3 || input1 === input3) {
      evt.prevetnDefault();
      $('#errMesssage').html('Text values have to be different.').show();
   }
});

Where '#errMessage' is the id of a div or another element to display the errors.

You may want to hide this element after they fix the problem.

Hope this helps.

Upvotes: 1

Related Questions