Проверка наличия поля ввода с помощью jQuery

Каким будет самый простой способ проверить, требуется ли вход? Я пробовал вещи в этих строках, но всегда придумывал все необходимое (только 4/6).

$('form#register').find('input').each(function(){
    if($(this).prop('required') == 'undefined'){
        console.log("NR");
    } else {
        console.log("IR");
    }
})

(Я тоже пробовал .attr)

Я пытаюсь использовать его для проверки формы ajax, Im делает это так в данный момент:

if($('form#register span').length == $('form#register').children(".green").length){
    $('input#register-sub').prop('disabled', false);
} else {
    $('input#register-sub').prop('disabled', true);
}

Спасибо.

EDIT: добавление HTML

<form id="register" action="" method="post" autocomplete="on">
<label>Nickname:</label><input type="text" name="name" value="<? echo $_POST['name'] ?>" required="" /><span id="reg-name"></span><br />

<?  if($user->type == "l"){ ?>
<label>email:</label><input type="email" name="email" value="<? echo $_POST['email'] ?>" required="" /><span id="reg-email"></span><br />
<label>Password:</label><input type="password" name="password" value="<? echo $_POST['password'] ?>" required="" /><span id="reg-password"></span><br />
<label>Again:</label><input type="password" name="password-test" value="<? echo $_POST['password-test'] ?>" required="" /><span id="reg-password-test"></span><br />
<label>Avatar:</label><input type="url" name="avatar" value="<? echo $_POST['avatar'] ?>" /><span id="reg-avatar"></span><br /> 
<? } ?>

<input type="submit" value="Register" disabled="" id="register-sub"/>

Ответы

Ответ 1

Свойством required является boolean:

$('form#register').find('input').each(function(){
    if(!$(this).prop('required')){
        console.log("NR");
    } else {
        console.log("IR");
    }
});

Ссылка: HTMLInputElement

Ответ 2

Немного более полного ответа, вдохновленного принятым ответом:

$( '#form_id' ).submit( function( event ) {
        event.preventDefault();

        //validate fields
        var fail = false;
        var fail_log = '';
        var name;
        $( '#form_id' ).find( 'select, textarea, input' ).each(function(){
            if( ! $( this ).prop( 'required' )){

            } else {
                if ( ! $( this ).val() ) {
                    fail = true;
                    name = $( this ).attr( 'name' );
                    fail_log += name + " is required \n";
                }

            }
        });

        //submit if fail never got set to true
        if ( ! fail ) {
            //process form here.
        } else {
            alert( fail_log );
        }

});

В этом случае мы зацикливаем все типы входов и, если они требуются, мы проверяем, имеют ли они значение, и если нет, то уведомление о том, что они требуются, добавляется в предупреждение, которое будет запущено.

Обратите внимание, что это, например, предполагает, что форма будет проходить внутри положительного условия через AJAX или аналогичный. Если вы отправляете с помощью традиционных методов, переместите вторую строку, event.preventDefault(); внутрь отрицательно условно.

Ответ 3

Для этого вам не нужен jQuery. Здесь решение ES2015:

// Get all input fields
const inputs = document.querySelectorAll('#register input');

// Get only the required ones
const requiredFields = Array.from(inputs).filter(input => input.required);

// Do your stuff with the required fields
requiredFields.forEach(field => /* do what you want */);

Или вы можете просто использовать селектор :required:

Array.from(document.querySelectorAll('#register input:required'))
    .forEach(field => /* do what you want */);

Ответ 4

$('form#register input[required]')

Он будет возвращать только те входные данные, которые имеют обязательный атрибут.