Question

我正在使用bootstrap来显示搜索页面。现在，在此搜索页面中，我希望用户在提交之前输入名称或标题。因此，需要放入两个字段中的一个。到目前为止，我没有找到支持它的任何内容，但可能是我到目前为止忽略了这个功能。

因此我的问题在于：引导程序是否可以根据需要使用2个字段中的1个？或者您是否必须自己编写完整的验证？

<form class="form-inline" role="form" data-toggle="validator">
    <div class="form-group">
        <label for="Name">Name:</label> 
        <input type="text" id="Name" />
    </div>
    <div class="form-group">
        <label for="Title">Title:</label> 
        <input type="text" id="Title" />
    </div>
    <input type="Submit" value="Search" class="searchButton" />
</form>

Answer 1

Bootstrap无法帮助您。 Bootstrap不包含任何形式的验证。

无论如何，由于Bootstrap使用jQuery，因此滚动你自己很简单......

＆＃13;

$('form').on('submit',function() {
  if ($('#Name').val() === '' &&  $('#Title').val() === '') {
    alert('Please enter either your name or your title');
    return false; /* cancel submit */
  }
  
  /* Passed! */
  /* Forms in snippets won't submit so ... */
  alert("Passed validation");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form class="form-inline" role="form" data-toggle="validator">
    <div class="form-group">
        <label for="Name">Name:</label> 
        <input type="text" id="Name" />
    </div>
    <div class="form-group">
        <label for="Title">Title:</label> 
        <input type="text" id="Title" />
    </div>
    <input type="Submit" value="Search" class="searchButton" />
</form>

＆＃13;

或者，如果您有2到n个必填字段，并且您不想对ID进行硬编码，那么您可以执行类似htis的操作...

＆＃13;

$('form').on('submit',function() {
    var emptyFields = 0;

    $('.required').each(function() {
        if ($(this).val() === '') { emptyFields++ }
    });

    if (emptyFields === $('.required').length) {
        alert('Please fill in at least one of the fields');
        return false; /* cancel submit */
    }
    
    /* Passed! */
    /* Forms in snippets won't submit so ... */
    alert("Passed validation");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form class="form-inline" role="form" data-toggle="validator">
    <div class="form-group">
        <label for="Name">Name:</label> 
        <input type="text" id="Name" class="required" />
    </div>
    <div class="form-group">
        <label for="Title">Title:</label> 
        <input type="text" id="Title" class="required" />
    </div>
    <input type="Submit" value="Search" class="searchButton" />
</form>

＆＃13;

是否可以将2个表单输入字段中的1个作为必填字段？

1 个答案: