如何进行 html5 验证然后重定向到另一个页面？答案

【问题标题】：How to do html5 validation then redirect to another page?如何进行 html5 验证然后重定向到另一个页面？
【发布时间】：2017-12-02 11:55:32
【问题描述】：

我对此很陌生，但我想知道如何让按钮验证输入然后重定向到页面？我注意到使用 onclick = "" 函数可以使用适当的输入类型验证输入，例如电子邮件，电话。但我似乎无法让它在重定向到下一页之前先验证。它要么验证但不重定向（我认为它提交了一个表单，因为 URL 更改为 like submit=?），要么它只是重定向到下一页而不进行任何验证

按钮：

<button id ="button" class="subscribe btn btn-success btn-lg btn-block">Proceed to Payment</button>

Javascript：

document.getElementById("button").onclick = function () {
    location.href = "payment.html";
};

如果我删除"location.href = "payment.html";，这目前根本不进行任何验证，只是将其重定向到下一页“payment.html”，它会进行验证但从不重定向。我猜是默认的 onclick 函数是执行 html5 验证的函数，我想我希望在重定向到下一页之前发生这种情况。

很抱歉，如果它很长，如果有人可以帮助我，我将不胜感激。谢谢！

【问题讨论】：

<form ... novalidate> ... </form> ?
请选择对您有用的答案，以便其他遇到相同问题的人也能从中受益

标签： javascript php jquery html validation

【解决方案1】：

嗯，有html5 和javascript 两个选项，您可以使用required 属性以防您想强制任何字段和action 属性将for 提交给一个动作，用于自定义您必须使用javascript的错误消息，验证和提交表单的简单演示如下高级示例和使用javascript进行验证使用regex和其他方法请参阅here

body {
  font: 1em sans-serif;
  padding: 0;
  margin: 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p>label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
  /* required to properly style form 
   elements on WebKit based browsers */
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #333;
  margin: 0;
  font-family: inherit;
  font-size: 90%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation -->

<form action="https://google.com">
  <p>
    <fieldset>
      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
    </fieldset>
  </p>
  <p>
    <label for="n1">How old are you?</label>
    <!-- The pattern attribute can act as a fallback for browsers which
         don't implement the number input type but support the pattern attribute.
         Please note that browsers that support the pattern attribute will make it
         fail silently when used with a number field.
         Its usage here acts only as a fallback -->
    <input type="number" min="12" max="120" step="1" id="n1" name="age" pattern="\d+">
  </p>
  <p>
    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
    <input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Banana</option>
      <option>Cherry</option>
      <option>Apple</option>
      <option>Strawberry</option>
      <option>Lemon</option>
      <option>Orange</option>
    </datalist>
  </p>
  <p>
    <label for="t2">What's your e-mail?</label>
    <input type="email" id="t2" name="email">
  </p>
  <p>
    <label for="t3">Leave a short message</label>
    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

【讨论】：

【解决方案2】：

大家好，很抱歉造成混乱！

我忽略了表单操作标记，我可以在其中放置 URL 以重定向到下一页。感谢您的帮助！

【讨论】：