Question

作为HTML，CSS和Javascript的小型初学者项目，我的任务是为餐馆制作网站。但是，当我尝试在required标记中使用input属性时，它无效。这是有问题的页面：

HTML：

  <form name = "loyalty1">
                <section id = "teal1">
                    <h2> Teal Level </h2>
                    <p> Get $10 off for every third meal (must be above $50) from the restuarant. Get exclusive discounts for new meals. Price: $20 /month.</p>
                    <div id = "checkbox" style = "background-color: none">
                      <input type = "checkbox" id = "teal">
                      <label for ="teal" style = "margin-left: 0px"> Buy Teal Level </label>
                    </div>
                </section>
                <section id = "aqua1">
                    <h2> Aqua Level </h2>
                    <p> Get $15 off for every third meal (must be above $50) from the restaurant. Not only will you get exclusive discounts for new meals, and you will recieve amazing recipies! Price: $40/month.</p>
                    <div id = "checkbox" style = "background-color: none">
                      <input type = "checkbox" id = "aqua" >
                      <label for ="aqua" style = "margin-left: 0px"> Buy Aqua Level </label>
                    </div>
                </section>
                <section id = "turquoise1">
                    <h2> Turquoise Level </h2>
                    <p> Get one meal free for every 3 meals above $50. You will also recieve exclusive discounts, new meals and attend private cooking and baking classes from our chefs! Price: $60/month. </p>
                    <div id = "checkbox" style = "background-color: none">
                      <input type = "checkbox" id = "turquoise">
                      <label for ="turquoise" style = "margin-left: 0px"> Buy Turquoise Level </label>
                    </div>
                </section>
                <div style = "display: inline; margin: 15px 580px">
                  Email: <input type = "email" name = "userEmail" required>
                  <input type="submit" onclick="loyalty()" style = "margin: 15px 620px">
                </div>
            </form>

Javascript功能：

function loyalty(){
  var email = document.loyalty1.userEmail.value;

  else
  {
    if ((document.getElementById("teal").checked == false) && (document.getElementById("aqua").checked == false) && (document.getElementById("turquoise").checked == false))
    {
      alert("Please select a loyalty level.")
    }
    else if (((document.getElementById("teal").checked == true) && (document.getElementById("aqua").checked == true)) || ((document.getElementById("teal").checked == true) && (document.getElementById("turquoise").checked == true)) || ((document.getElementById("aqua").checked == true) && (document.getElementById("turquoise").checked == true))) {
      alert ("Please select only one loyalty level.")
    }
    else if (document.getElementById("teal").checked == true)
    {
          alert ("Thank you for choosing the Teal loyalty level. We will email you at " + email + " for further instructions.")
     }
    else if (document.getElementById("aqua").checked == true) {
        alert ("Thank you for choosing the Aqua loyalty level. We will email you at " + email  + " for further instructions.")
      }
    else if (document.getElementById("turquoise").checked == true) {
        alert ("Thank you for choosing the Turquoise loyalty level. We will email you at " + email + " for further instructions.")
    }
  }
}

在我网站的另一个页面上，required属性工作正常，这实在令人困惑：

function feedback() {
  var email = document.feedback.userEmail.value;
  var comments = document.feedback.comment.value;

  if (comments == "")
  {
    alert("Please fill in the comment field.")
  }

  alert ("Thank you for your feedback. \n" + "Email: " + email + "\nComment: " + comments);
}

<form name = "feedbackForm" id = "feedback">
                    <p> Please enter your email: </p>
                    <input type = "email" id = "userEmail" required>

                    <p> Please enter your feedback: </p>
                    <textarea rows = "4" columns = "50" name = "comment" form = "feedback">Enter text here</textarea>

                    <input type = "submit" style = "margin: 15px 620px" onclick = "feedback()">
                </form>

请帮忙！感谢

Answer 1

您的代码中的必填字段工作正常！我建议你把复选框更改为收音机这样可以避免检查用户是否只选择了一个项目（单选按钮不允许选择2个同名的收音机）

必需属性不适用于表单

1 个答案: