Question

我有一个带隐藏字段的HTML5 / Bootstrap表单： style="display: none"

我通过jQuery显示/隐藏：

show() | hide()

对于字段验证，我使用属性必需。

我想根据需要设置所有隐藏字段，但当其中一些字段不显示时，表单就无法继续提交。

有关如何仅对用户选择显示的字段启用验证的任何想法？

Answer 1

您可以在html中为所有必需的属性添加一个类名：

<input type="text" name="first_name" class="card-payment-info" required>
<input type="text" name="last_name" class="card-payment-info" required>

，并且从js事件（如单击）中，您可以启用或禁用所需的属性：

// disable require:
$(".card-payment-info").attr('required', false);
// enable require
$(".card-payment-info").attr('required', true);

Answer 2

将类.hideable添加到可隐藏的必需输入中。然后使用这些函数代替show（）和hide（）：

function show1() {
//Your show() code here
$('.hideable').attr('required', 'required');
}
function hide1() {
//Your hide() code here
$('.hideable').removeAttr('required');
}

Answer 3

您可以使用此技巧：

内部HTML表单：

<input type="text" name="username" required="required" class="input-hidden">

CSS类：

.input-hidden{
        height:0;
        width:0;
        visibility: hidden;
        padding:0;
        margin:0;
        float:right;
}

Answer 4

1-将表单更改为“ novalidate”

2-赶上提交事件

3-强制浏览器使用input.reportValidity（）单独检查每个可见输入

$('form')
  .attr('novalidate', true)
  .on('submit', function(){
    var isValid = true;
    $('input:visible,select:visible,textarea:visible', this).each(function() {
      // report validity returns validity of input and display error tooltip if needed
      isValid = isValid && this.reportValidity();
      // break each loop if not valid
      return isValid;
    });
    // do not submit if not valid
    return isValid;
  })

为此我制作了一个JQuery工具，该工具还使用了一个突变观察器来自动应用于动态创建的表单。

https://github.com/severinmoussel/VisibilityFormValidator/blob/master/VisibilityFormValidator.js

表格隐藏字段和所需的验证用途

4 个答案: