使用 Javascript /jQuery 的 Bootstrap 4 表单验证

Posted 2023-05-08

【中文标题】使用 Javascript /jQuery 的 Bootstrap 4 表单验证

【英文标题】：Bootstrap 4 Form Validation with Javascript /jQuery

【发布时间】：2018-07-25 14:08:51

【问题描述】：

我是 Web 开发的新手，正在尝试设置一个练习表单来学习表单验证。我正在关注 Bootstrap 的 doc 自定义样式，以处理那些使用屏幕阅读器的可访问性问题，并为跨不同浏览器的用户标准化验证外观。

我已经设置了一个基本表单，并尝试使用 jQuery 创建一个 javascript 函数来处理验证。我觉得我快到了，但仍然没有像 Bootstrap 演示显示的那样进行验证。

index.html

<form id="signup-form" novalidate>

  <div class="form-group">
    <h1>Sign Up</h1>
    <p>Use this form to enter your name and email to sign up.</p>
  </div>

  <!-- Name -->
  <div class="form-group">
    <div class="row">
      <div class="col">
        <label for="firstNameInput">Name</label>
        <input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col">
        <label for="lastNameInput">Last</label>
        <input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
  </div>

  <!-- Email -->
  <div class="form-group">
    <label for="emailAddressInput">Email address</label>
    <input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="[e-mail]" required>
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>

  <!-- Options -->
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
      <label class="form-check-label" for="type1RadioButton">
        Type 1 user
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
      <label class="form-check-label" for="type2RadioButton">
        Type 2 user
      </label>
    </div>
  </div>

  <!-- Submit Button -->
  <div class="form-group">
    <a href="#" class="btn btn-primary" id="submitButton" type="submit">Submit</a>
  </div>

</form>

script.js

$(document).ready(function() 
  $("#submitButton").click(function() 

    //Fetch form to apply custom Bootstrap validation
    var form = $("#signup-form")
    //alert(form.prop('id')) //test to ensure calling form correctly

    if (form.checkValidity() === false) 
      event.preventDefault()
      event.stopPropagation()
    
    form.addClass('was-validated')
  )
)

【问题讨论】：

请编辑问题以阐明问题是什么。什么不工作？

【参考方案1】：

问题是 checkValidity() 存在于 first 表单节点上，而不是表单上。

改变这个：form.checkValidity() === false

对此：form[0].checkValidity() === false

它有效：https://www.codeply.com/go/pUPBLzn6yL

$(document).ready(function() 
  $("#submitButton").click(function() 

    //Fetch form to apply custom Bootstrap validation
    var form = $("#signup-form")
    alert(form.prop('id')) //test to ensure calling form correctly

    if (form[0].checkValidity() === false) 
      event.preventDefault()
      event.stopPropagation()
    
    form.addClass('was-validated');

    //Make ajax call here

  )
)

有关 Bootstrap 4 验证的更多信息：Can't make the validation work in Bootstrap 4

【讨论】：

感谢关于我的问题格式的提示。我注意到在添加单选按钮输入时，即使它们没有required 属性，label 文本前景在表单验证时会变为绿色。有没有办法不执行验证或绕过验证，以阻止单选按钮 labels 的前景变为绿色，因为它是仅有的两个选项之一（总共 2 个单选按钮），默认情况下必须选择一个?我只是想知道为什么会发生这种情况，因为它看起来很奇怪，特别是如果required 属性没有放在任何一个单选按钮input 上。

这听起来像是一个单独的问题。使用代码示例发布一个新问题。

张贴在这里***.com/questions/48815128/…