Где моя функция проверки не работает для выбора
3 года в js, и я не могу использовать простые библиотеки валидатора. Поэтому я решил создать свой собственный. он работает, добавляя атрибут просто обязан ко всем входам, select, textarea и т. д. (еще не пробовал на радио). функция проверяет, является ли ввод пустым, и возвращает true. код функции, как показано ниже
он работает, вызывая функцию с формой, являющейся ее вводом функции
Проблема в том, что он не работает на моем выбранном входе.
вот мой пример кода
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>Спасибо..!
пожалуйста, объясните больше
jmust не является допустимым атрибутом для HTML-тегов. Если вам нужны пользовательские атрибуты, вы должны добавить к ним префикс data-: w3schools.com/tags/att_global_data.asp.
в вашем примере значение select равно disable, поэтому всегда будет false
вы можете просто добавить общий класс для всех входных данных и выбрать в своей форме вместо использования пользовательского атрибута или $(x).find("input,select").each(function(){
ты прав @SteveT. Моя первая ошибка там
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваше условие $(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 && !!$(this).val();
$(this)[action]('invalid animated shake');
});
// For debugging purposes
console.info(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 && !!$(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.info(jempty_form("#myformid"));
</script>
</body>
</html>
Я сделал небольшое изменение,
if ($(this).val()) {
на месте
if ($(this).val() != ""){
if ($(this).val()) и if ($(this).val() != "") оба работают одинаково в его случае
нет, проверьте еще раз, оба показывают разные результаты, цвет границы меняется
хотя не рекомендуется использовать пользовательский атрибут, такой как «jmust»
Лучше иметь атрибут данных или что-то в этом роде
Вам следует рассмотреть возможность использования атрибутов
data-*вместо пользовательских (недействительных) атрибутов.