Сравнение двух значений текстового поля во избежание дублирования перед отправкой с использованием пользовательской проверки из webshim

Question

Я использую библиотеку webshim, мне нужно сравнить два значения текстового поля, чтобы избежать дубликатов, и хочу установить пользовательское сообщение проверки.

    <form action="sample.html" method="post">
    <label for="country1">Country 1 </label>
    <input type="text" value="" id="country1" name="country1" required/>
    <label for="country2">Country 2 </label>
    <input type="text" value="" id="country2" name="country2" required />
    <input type="button" value="submit" />
    </form>


<script>
  $(document).ready(function(){
    $("#formsubmit").click(function(){
       if($('form').checkValidity()){   
         if($("#country2").val()!= $("#country1").val()){
               $("#country2").addClass('valid').removeClass('invalid')
               $('form').submit();
         }else{
             $("#country2").addClass('invalid').removeClass('valid').setCustomValidity('Please     Enter different country ');
         }
     }
 });

});
</script>    

В первый раз при отправке формы, если два значения текстового поля совпадают, пользовательское сообщение о достоверности заменяется, как определено. но при изменении значения "страна 2" поле остается недействительным и форма не отправляется.

Спасибо

Answer 1

Ваша проблема в том, что вы проверяете только те значения, если форма действительна. Но как только вы добавите пользовательскую ошибку, вы никогда не сможете ее отправить. Кроме того, вам не нужно отправлять форму программно.

Здесь вы найдете рабочую демонстрацию для вашей проблемы

var setCountryValidity = function () {
    var message = 'Please     Enter different country ';

    //only test if valid or is invalid because of this validity test
    if ($("#country2").is(':valid') || $("#country2").prop('validationMessage') == message) {
        if ($('#country1').val() != $("#country2").val()) {
            message = '';
        }

        $("#country2").setCustomValidity(message);
    }
};

//test if country1 was changed
$("#country1")
    .on('change', setCountryValidity)
;
//test if country2 was changed and ...
$("#country2")
    .on('change', setCountryValidity)
    //... on DOMready
    .each(setCountryValidity)
;