Зацикливание через несколько типов входов

Question

Я пытаюсь написать некоторую проверку формы в jQuery. Это основное, я проверяю только пустые входы.

Однако в моей форме есть три разных типа элементов: <input type="text">, <select> и <input type="checkbox">. У меня возникают проблемы с моей проверкой работы со всеми этими.

Это мой код до сих пор:

частичной HTML

<input type="hidden" name="required" value="title,first_name,family_name,job_title,company_name,country,address_1,town_city,post_code,telephone_2,email,subprimary_activity,subjob_title2,subscription" /> 

JAVASCRIPT

$("input[name=submit_form]").on("click", function(e) { 
    e.preventDefault(); 
    var missing_items = []; 
    var required_array = $("input[name=required]").val().split(","); 
    var i; 
    for (i = 0; i < required_array.length; i++) { 
     var input_name = required_array[i]; 
     if ($("input[name=" + input_name + "]").val() == "" || $("select[name=" + input_name + "]").val() == "" || !$("input[name=" + input_name + "]").is(":checked")) { 
      missing_items.push(input_name); 
     } 
    } 
    alert(missing_items); 
}); 

alert() в настоящее время уведомляет меня о каждом элементе, будь это или нет отсутствует значение/проверка. Я знаю это, потому что это потому, что у моего if есть три параметра, и как-то не может быть <input>и a <select>, он всегда будет оценивать true.

Как я могу переписать это так, чтобы он функционировал правильно? Есть ли способ проверить, что типа ввода является элементом, или если существует определенный элемент и, следовательно, выполняется только соответствующий validaton?

например.

if (is input text) { 
    check val() ! empty 
} 
else if (is select) { 
    check val() !empty 
} 
else if (is input checkbox) { 
    check :checked 
} 

Answer 1

Изменить код здесь

if ($("input[name=" + input_name + "]").val() == "" || $("select[name=" + input_name + "]").val() == "" || !$("input[name=" + input_name + "]").is(":checked")) { 
      missing_items.push(input_name); 
     } 

Для этого

var element = $("[name=" + input_name + "]"); 
if(element.is(":text")) 
    // your code 
else if (element.is("select") 
    // your code 
else if (element.is(":checkbox") 
    // your code 

Answer 2

Вы можете проверить ввод является тип текста или не используется следующий метод: -

if($(this).is('input')) // $(this) is your form element 
{ 
    // it was an input 
} 

Это может помочь вам.

Answer 3

Я думаю, что я пойду на что-то вроде этого:

(поддельный код, посмотрите на doc selectors и each())

$("input[type=text]").each(
    check val() ! empty 
) 
$("select").each(
    check val() !empty 
) 
$("input[type=checkbox]").each(
    check :checked 
) 

Здесь код образца для text полей

function f() { 
 
    $("input[type=text]").each(function() { 
 
    alert($(this).val()); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="hello"> 
 
<br> 
 
<input type="email" value="test@test.com"> 
 
<br> 
 
<input type="text" value="hola"> 
 
<br> 
 
<input type="button" onclick="f()" value="run"> 
 
<br>

Answer 4

Просто проверьте тип входа, проверяя его атрибут типа

function validate($input) 
{ 
    if ($input.attr("type") == 'text' && $input.val().length > 0) return true; 
    if ($input.attr("checkbox") == 'text' && $input.is(":checked")) return true; 
    if ($input.prop("tagName") == 'select'&& $input.val().length > 0) return true; 
    return false; 
} 

Answer 5

Вот что я сделал:

$("input[name=submit_form]").on("click", function(e) { 
    e.preventDefault(); 
    var missing_items = []; 
    var $requiredInputs = $("input.required, select.required"); 

    $requiredInputs.each(function() { 
     if ($(this).attr("type") == 'text' && $(this).val().length <= 0) { 
     missing_items.push($(this)); 
     } 
     if ($(this).attr("type") == 'checkbox' && !$(this).is(":checked")) { 
     missing_items.push($(this)); 
     } 
     if ($(this).is('select') && $(this).val().length <= 0) { 
     missing_items.push($(this)); 
     } 
    }); 

    alert(missing_items); 
}); 

И вот скрипка: https://jsfiddle.net/s9hd7jjq/2/

Немного измененная версия вашего кода. Я захватываю все входы и выбирает класс требуемых на них. Затем я прохожу через каждый из них, используя метод .each, сначала проверяя его тип, затем второе условие, заполняется или проверяется, и т. Д. Если это не так, его вставляют в массив отсутствующих элементов.

Вы можете легко изменить это, чтобы проверить, пуст ли элемент, изменив каждое условие. Я думаю, что это должно поставить вас на правильный путь.