46

检查是否需要输入的最简单方法是什么？我一直在尝试这些方面的东西，但总是想出所有需要的东西（只有 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"/>

4

6 回答 6

90

该required物业是boolean：

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

参考：HTMLInputElement

于 2013-08-28T18:20:25.363 回答
17

受公认答案的启发，提供了一些更完整的答案：

$( '#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();移至否定条件内部。

于 2015-05-11T04:54:17.930 回答
8

您不需要 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 */);
于 2015-11-19T23:24:33.453 回答
4 
$('form#register input[required]')

它只会返回具有必需属性的输入。

于 2019-07-09T09:28:03.160 回答
1

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

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

});
于 2021-02-02T17:43:41.467 回答
0

回应：

检查是否需要输入的最简单方法是什么？

答案是：

.is()的力量

我用它来检查任何属性，例如：.is('[type="image"]')、.is(':disabled') 或 .is('[disabled]')... 等等。它返回一个布尔值。

    
    $(':input').each(function(){
      var ID  = $(this).prop('id'),
          req = $(this).is('[required]'),
          img = $(this).is('[type="image"]');
      
      if(img){
        alert(ID + ' is an image input');
      } else {
        alert(ID + ' is NOT an image');
      }
      
      if(req){
        alert(ID + ' is required');
      } else {
        alert(ID + ' is NOT required');
      }
      

    });

        
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="inOne" name="test" required>
<input type="text" id="inTwo" name="test">
<input type="image" id="inThree" name="test" required>

于 2021-11-11T03:03:18.967 回答