Sunday, May 13, 2012

prevent Duplicate values using Jquery Validation


I have form and form text field which generates dynamically using JSP. And I'm using Jquery validation but want to add functionlaty to prevent duplicate entry in the form.



E.g.




<form name="myForm" id="myForm">
<input type="text" name="text1" id="text1">
<input type="text" name="text2" id="text2">
<input type="text" name="text3" id="text3">
=
=
N number of form fields
<input type="text" name="textn" id="textn">

</form>



I want to check if there is any duplicate value entered in the textfield using jquery validation.



Thanks


Source: Tips4all

3 comments:

  1. Something like this should work:

    $(function(){

    $('input[name^="text"]').change(function() {

    var $current = $(this);

    $('input[name^="text"]').each(function() {
    if ($(this).val() == $current.val() && $(this).attr('id') != $current.attr('id'))
    {
    alert('duplicate found!');
    }

    });
    });
    });


    In a nutshell, how this works is: Whenever a user enters something into a text box, JQuery loops through all the text boxes in the form and compares their values with the value that the user just entered, if a duplicate value is found, then alert the user.

    ReplyDelete
  2. Bug Magnet your answer is not extending the functionality of jquery validate. its a separate script.

    You can achieve this by making these changes in In jquery.validate.js:

    line 275: add a message for the unique method

    messages: {
    unique: "This answer can not be repeated.",


    line 744: add a new class rule for unique

    classRuleSettings: {
    unique: { unique: true },


    and finally line 899: add the new unique method

    methods: {

    unique: function (value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    $(parentForm.find('input:type=text')).each(function () {
    if ($(this).val() === value) {
    timeRepeated++;
    }
    });
    if (timeRepeated === 1 || timeRepeated === 0) {
    return true
    }
    else {
    return false
    }
    },


    now simply when you call your validate function you can use a unique method like this:

    $("#signupForm").validate({
    rules: {
    firstname: "required",
    lastname: "required",
    username: {
    required: true,
    unique: true,
    minlength: 2
    },

    ReplyDelete
  3. If I'm not mistaken, you could narrow the duplicate comparison down a bit. For example, I just want to look at other fields of the same class, say 'name':

    $(parentForm.find('.name')).each(function () {
    if ($(this).val() === value) {
    timeRepeated++;
    }


    or maybe:

    $('.name').each(function () {
    if ($(this).val() === value) {
    timeRepeated++;
    }

    ReplyDelete