Question

当我没有选择required时，我试图更改它的名称。当我单击“发送”而不先选择它时，它将显示一个错误，但是当我再次选择它但没有放置required语法的第一个单选按钮时，它仍然显示相同的错误，迫使我选择第一个单选按钮。请问有办法解决吗？谢谢您的帮助。

这是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form method="post" action="" id="form">

      <div class="container">
        <div class="intro-text left-0 text-left text-black p-4 rounded " style="background-color: #ffbe76">

          <div class="section-heading-upper">
            <p class="mb-3 lead">1. ......?
            </p>
          </div>
          <div class="row ml-2">
            <div class="col-auto">
              <div class="form-group mx-auto option">
                <h2 class="section-heading mb-2">
                  <span class="text-center section-heading-upper">Layanan</span>
                </h2>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="penting1" id="1penting1" value="100.00" required="" oninvalid="this.setCustomValidity('Pick one')" oninput="this.setCustomValidity('')">
                  <label class="form-check-label" for="exampleRadios1">
                    Sangat Penting
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="penting1" id="1penting2" value="81.25">
                  <label class="form-check-label" for="exampleRadios2">
                    Penting
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="penting1" id="1penting3" value="62.50">
                  <label class="form-check-label" for="exampleRadios3">
                    Tidak Penting
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="penting1" id="1penting4" value="43.75">
                  <label class="form-check-label" for="exampleRadios4">
                    Sangat Tidak Penting
                  </label>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <div class="form-group mx-auto option">
                <h2 class="section-heading mb-2">
                  <span class="text-center section-heading-upper">Kepuasan Layanan</span>
                </h2>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="puas1" id="1puas1" value="100.00" required oninvalid="this.setCustomValidity('Pick one')" oninput="setCustomValidity('')">
                  <label class="form-check-label" for="exampleRadios1">
                    Sangat Puas
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="puas1" id="1puas2" value="81.25">
                  <label class="form-check-label" for="exampleRadios2">
                    Puas
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="puas1" id="1puas3" value="62.50">
                  <label class="form-check-label" for="exampleRadios3">
                    Tidak Puas
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="puas1" id="1puas4" value="43.75">
                  <label class="form-check-label" for="exampleRadios4">
                    Sangat Tidak Puas
                  </label>
                </div>
              </div>
            </div>
          </div>
<div class="text-center mt-2">
        <input class="btn btn-primary btn-lg" value="Send" id="singlebutton" name="submit" type="submit" onclick="check()">
      </div>
    </form>

Answer 1

您可以删除必需的属性并测试是否使用jQuery检查特定属性，如下所示：

if ($('input[name=penting1]:checked').length > 0) {
    //selected
}

if ($('input[name=puas1]:checked').length > 0) {
    //selected
}

它将起作用：）

选择单选按钮后如何使必填项为空

1 个答案: