Question

我需要验证输入字段，如文本，电子邮件，广播，复选框，选择。让我说我有这个：

<fieldset>
    <div class="form-top">
         <div class="form-bottom">
              <div class="form-group">
                   <label class="sr-only" for="form-first-name">First name</label>
                   <input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
              </div>
              <div class="form-group">
                   <label class="sr-only" for="form-last-name">Last name</label>
                   <input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
              </div>
              <div class="form-group">
                   <input type="radio" name="gender" value="male"> Male<br>
                   <input type="radio" name="gender" value="female"> Female<br>
                   <input type="radio" name="gender" value="other"> Other  
              </div>
                   <div class="form-group">
                   <label class="sr-only" for="form-about-yourself">About yourself</label>
                   <textarea name="form-about-yourself" placeholder="About yourself..." class="form-about-yourself form-control" id="form-about-yourself"></textarea>
                   </div>
                   <button type="button" class="btn btn-next">Next</button>
        </div>
</fieldset>

在jQuery中，我用它来验证：

$('.registration-form .btn-next').on('click', function() {
        var parent_fieldset = $(this).parents('fieldset');
        console.log(parent_fieldset);
        var next_step = true;

        parent_fieldset.find('input[type="text"], input[type="radio"], input[type="password"], textarea').each(function() {
            if( $(this).val() == "" ) {
                $(this).addClass('input-error');
                next_step = false;
            }
            else {
                $(this).removeClass('input-error');
            }
        });

输入类型= text和textarea验证正在运行，但输入类型=无线电。有什么想法吗？

更新1 我正在使用多步骤表单，我使用此example，在此示例中，我在第一步中添加了

<div class="form-group">
     <input type="radio" name="gender" value="male"> Male<br>
     <input type="radio" name="gender" value="female"> Female<br>
     <input type="radio" name="gender" value="other"> Other  
</div>

Answer 1

请不要检查($this).val()您要检查的电台：

($this).find(":selected").text();

修改

一个小例子：

$('.btn').on('click', function() { $("input[type='radio']").each(function() { var radioName= $(this).attr('name'); var isChecked =$("input[name='"+radioName+"']:checked").val(); if( $(this).val() != "" && isChecked){ $("#result").html('success'); } else { $("#result").html('error'); } }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </div> <div id="result"></div> <input type="button" class="btn" value="send"/>

使用基于input type = radio / checkbox / select的jQuery进行验证

1 个答案: