Блог

3 года в js, и я не могу использовать простые библиотеки валидатора. Поэтому я решил создать свою собственную. она работает путем добавления атрибута jmust ко всем входным данным, select, textarea и т.д. (еще не опробовано на radio.). функция проверяет, является ли ввод пустым, и возвращает true. код функции выглядит следующим образом

это работает путем вызова функции с формой, являющейся ее функцией ввода Проблема в том, что она не работает при моем вводе select.
вот мой пример кода

 function jempty_form(x) {
  var n = false;
  $(x).find("[jmust]").each(function() {
    if ($(this).val() != "") {
      $(this).css("border", "none").css("border", "1px solid grey");
    } else {
      $(this).css("border", "1px solid red").addClass("animated shake");
      n = true;
      // alert("An input is Empty")
    }
  })
  return n;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class=" form-control " id="gender" jmust name="gender">
  <option disabled selected>Select Gender</option>
  <option value="female">Female</option>
  <option value="male">Male</option>
</select>
<script>
  jempty_form("#myformid");
</script>  

спасибо ..!

Ваше $(this).val() != "" условие не работает для пустых выборок, потому что пустая строка не равна null в JS.

Вместо этого вы могли бы просто проверить, является ли значение истинным. Это делается простым тестированием $(this).val() , которое будет преобразовано в логическое значение при оценке его в контексте условия.

Я бы также рекомендовал:

• используя data- атрибуты ( data-jmust здесь) вместо недопустимых атрибутов,
• использование класса CSS для состояния ошибки вместо настройки CSS вручную (таким образом, вы можете легко восстановить входные данные в исходное состояние и не путать стиль с функциональностью).

ДЕМОНСТРАЦИЯ:

 function jempty_form(x) {
  var valid = true;
  
  $(x).find('[data-jmust]').each(function () {
    var action = $(this).val() ? 'removeClass' : 'addClass';
    valid = valid amp;amp; !!$(this).val();
    $(this)[action]('invalid animated shake');
  });
  
  // For debugging purposes
  console.log(valid ? 'valid form' : 'invalid form');
  
  return valid;
}

jempty_form('#myformid');

$(function () {
  $(':input').on('change', function (e) {
    jempty_form('#myformid');
  });
});  

 .invalid { border: 1px solid red; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myformid">
  <select data-jmust class="form-control" id="gender" name="gender">
    <option disabled selected>Select Gender</option>
    <option value="female">Female</option>
    <option value="male">Male</option>
  </select>
</form>  

Просто небольшое объяснение в valid = valid amp;amp; !!$(this).val(); строке, это быстрый способ сказать: «форма действительна, если она уже действительна (перед текущим полем) и значение текущего ввода также не является пустым».

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

 <form id="myformid" action="" method="POST"> 
    <select class=" form-control " id="gender"  jmust name="gender">
        <option  disabled selected>Select Gender</option>
        <option value="female" >Female</option>
        <option value="male">Male</option>
    </select>

</form> 
<script
    src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y 7E="
crossorigin="anonymous"></script>
<script language="JavaScript">

    function jempty_form(x) {
        var n = false;
        $(x).find("[jmust]").each(function () {
            if ($(this).val()) {
                $(this).css("border", "none").css("border", "1px solid grey");
            } else {
                $(this).css("border", "1px solid red").addClass("animated shake");
                n = true;
                // alert("An input is Empty")
            }
        })
        return n;
    }

    console.log(jempty_form("#myformid"));

</script>
</body>
</html>
  

Я внес незначительные изменения,

 if ($(this).val()) { 
  

вместо

 if($(this).val() != ""){