Предотвратить дублирование значений с помощью проверки JQuery

Ответ 1

Что-то вроде этого должно работать:

$(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!');
        }

    });
  });
});

Вкратце, как это работает: всякий раз, когда пользователь вводит что-либо в текстовое поле, JQuery перемещается по всем текстовым полям в форме и сравнивает их значения со значением, которое только что вводил пользователь, если дублирующее значение равно, затем предупредить пользователя.

Ответ 2

Я новичок в проверке jquery, но у меня была аналогичная проблема для решения, я придумал следующее решение (используя предыдущие ответы для вдохновения!):

JavaScript:

jQuery.validator.addMethod("unique", function(value, element, params) {
    var prefix = params;
    var selector = jQuery.validator.format("[name!='{0}'][unique='{1}']", element.name, prefix);
    var matches = new Array();
    $(selector).each(function(index, item) {
        if (value == $(item).val()) {
            matches.push(item);
        }
    });

    return matches.length == 0;
}, "Value is not unique.");

jQuery.validator.classRuleSettings.unique = {
    unique: true
};

Использование:

<input name="currency1" unique="currency" />
<input name="currency2" unique="currency" />

Демо здесь: http://jsfiddle.net/mysteryh/bgzBY/

Ответ 3

Bug Magnet ваш ответ не расширяет функциональность проверки jquery. его отдельный script.

Это можно сделать, введя эти изменения в In jquery.validate.js:

строка 275: добавьте сообщение для уникального метода

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

строка 744: добавьте новое правило класса для уникального

classRuleSettings: {
        unique: { unique: true },

и, наконец, строка 899: добавьте новый уникальный метод

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

теперь просто, когда вы вызываете свою функцию проверки, вы можете использовать уникальный метод, подобный этому:

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

Ответ 4

Для чего это стоит новым зрителям этого сообщения... Я не мог заставить ни одно из этих решений работать для меня (я использую v1.13.1)... поэтому я сделал немного Frankensteining и собирая биты и куски из нескольких ответов вместе, чтобы создать то, что мне было нужно (и, в свою очередь, создало еще один ответ на этот вопрос). Мой сценарий был похож на @Vicky в том, что мне нужно, чтобы поля были уникальными. Однако, если поле не было обязательным полем, тогда было бы хорошо, чтобы оно было пустым.

Используя часть решения от @XGreen и предложение от @Stephen Bugs Kamenar, это решение, с которым я столкнулся:

Решение

$.validator.addMethod("unique", function(value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }
        });
    }
    return timeRepeated === 1 || timeRepeated === 0;

}, "* Duplicate");

Как использовать

Чтобы использовать это решение, все, что вам нужно сделать, это добавить класс со значением уникальный в поля ввода, которые вы хотите быть уникальными:

<input type="text" class="unique" name="firstName" />
<input type="text" class="unique" name="lastName" />

В приведенном выше примере jQuery Validate выдаст ошибку, если значение firstName и lastName совпадают.

Работает с jQuery.Validate v1.13.1 или новее.

Ответ 5

Если я не ошибаюсь, вы можете немного уменьшить дублирующее сравнение. Например, я просто хочу посмотреть другие поля одного и того же класса, например "имя":

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

или возможно:

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

Ответ 6

 <input type="text" id= "txtName" class="name" onfocusout="checkName(this)">
 function checkName(thisvalues) {
        var currentval = $('#' + thisvalues.id).val();
        $('.name').each(function () {
            console.log(this.value + ',' + this.id);
            if (currentval == this.value && thisvalues.id != this.id) {
                alert('With' + this.value+ 'name already exists');
            }
        });
    }

Ответ 7

Я не буду использовать плагин Validator, но, может быть, это http://jsfiddle.net/6dbrjbg6/2/ может помочь:

function ISeeWhatYouDidThere(e) {
    var $repeat = 0,
        $val = e.val(),
        $parent = "#" + e.closest("div").attr("id")
    ;
    if($.trim($val) == "")
        return;
    e.removeClass("ui-state-error");
    $("input", $parent).each(function() {
        if($(this).val() == $val)
            $repeat++;
    });
    if($repeat <= 1)
        return;
    alert("Repetido!");
    e.addClass("ui-state-error");
}
/////////////////////////////////
$("input","div").blur(function(){
    ISeeWhatYouDidThere(
        $(this)
    );
});

Ответ 8

Это должно работать:

HTML

<form name="myForm" id="myForm">
   <input type="text">
   <input type="text">
   <input type="text">
   <input type="text">
   <button>Click</button>
</form>

JQuery

$(function(){

    $('button').click(function(){

    var len = $('input').length,i,k;
    $('input').css({'border':'solid 1px #888'})

    for(i=0; i < len; i++){
      var v = $('input:eq('+ i +')').val();
      for( k=0; k < i; k++ ){
        var s = $('input:eq('+ k +')').val();
        if( s == v ){
          $('input:eq('+ i +')').css({'border':'solid 1px #F00'})
          $('input:eq('+ k +')').css({'border':'solid 1px #F00'})
          return false;
        }
       }
     }
  })

})

Ответ 9

Я знаю, что это старый вопрос, и ответ немного отличается от первоначального вопроса, но я какое-то время вырывал свои волосы, потому что хотел только проверить определенное поле против другого конкретного поля и не мог заставить его работать другой путь. Проверка JQuery поставляется с валидатором equalTo. https://jqueryvalidation.org/equalTo-method/

Который в исходном коде выглядит так:

equalTo: function( value, element, param ) {

        // Bind to the blur event of the target in order to revalidate whenever the target field is updated
        var target = $( param );
        if ( this.settings.onfocusout && target.not( ".validate-equalTo-blur" ).length ) {
            target.addClass( "validate-equalTo-blur" ).on( "blur.validate-equalTo", function() {
                $( element ).valid();
            } );
        }
        return value === target.val();
    }

возьмите этот код и используйте функцию addMethod следующим образом: addMethod местами === на !==:

jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
        // Bind to the blur event of the target in order to revalidate whenever the target field is updated
        var target = $( param );
        if ( this.settings.onfocusout && target.not( ".validate-equalTo-blur" ).length ) {
            target.addClass( "validate-equalTo-blur" ).on( "blur.validate-equalTo", function() {
                $( element ).valid();
            } );
        }
        return value !== target.val();
        // condition returns true or false
    }, "Values must be unique");

Затем примените в разделе правил:

 'first_name':{
      required: true,
      notEqualTo: '#last_name'
  }

Ответ 10

Вот еще один слегка измененный ответ из предыдущих ответов.

Этот проверяет дубликаты значений для элементов формы с одинаковыми именами (что совершенно правильно с точки зрения HTML).

Например:

<input type="email" name="emailField" id="email-1" />
<input type="email" name="emailField" id="email-2" />
<input type="email" name="emailField" id="email-3" />

Примечание: вам даже не нужен идентификатор, он просто показан для полноты.

Следующий пользовательский валидатор проверит эти входные данные как имеющие уникальные значения:

$.validator.addMethod('unique', (value, element) => {
    var timeRepeated = 0;
    if (value && value.length)
    {
        $('input[name=${(element as HTMLFormElement).name}]').each(function ()
        {
            if ($(this).val() === value)
            {
                timeRepeated++;
            }
        });
    }
    return timeRepeated === 1 || timeRepeated === 0;
});

Примечание. Это TypeScript, но его легко конвертировать обратно в чистый JS.

Обязательно включите правило в другом месте, например:

var myValidationRules = {
  emailField: {
    unique: true
  }
}

И поместите сообщение проверки в определение валидатора выше или используйте свойство validator.settings.messages.