Question

检查是否需要输入的最简单方法是什么？我一直在尝试这些方面的东西，但总是提出所有要求（只有4/6）。

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

（我试过.attr以及）

我试图将它用于表单ajax验证，我现在这样做：

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

感谢。

编辑：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"/>

Answer 1

required属性为boolean：

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

参考：HTMLInputElement

Answer 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();移至负条件内。

Answer 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 */);

Answer 4

下面的代码工作正常，但我不确定单选按钮和下拉列表

$( '#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 );
    }

});

Answer 5

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

它将仅返回具有必需属性的输入。

使用jQuery检查是否需要输入字段

5 个答案: