jquery表单URL验证自定义消息

Question

我已经包含了 jquery 文件和下面的 HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

HTML：

<form action="http://www.google.com" onSubmit="return validate();">
        <input type="url" required="true" name="URL" >
        <input type="submit" value="Submit">
</form> 

当我提交带有空字段的表单时，请给出消息“请填写该字段”。我想给出我的自定义消息。

我该怎么办？

Answer 1

你可以使用setCustomValidity:

<form action="http://www.google.com" onSubmit="return validate();">
  <input type="url"
    oninvalid="setCustomValidity('custom message ')"
    onchange="try{setCustomValidity('')}catch(e){}" required="true"  />
  <input type="submit" value="Submit">
</form> 

在 Mozilla 中，这可以通过以下方式实现：

x-moz-errormessage="custom message"

在您的情况下，有两种情况；空白和自定义消息。对于这种特殊情况 以下代码将起作用：

<form action="http://www.google.com" onSubmit="return validate();">
  <input type="url"
    oninvalid="setCustomValidity(validity.typeMismatch
                                      ? '(custom) wrong url '
                                      : '(custom)Field cannot be blank ')"
    onchange="try { setCustomValidity('') } catch (e) {}" required="true"  />
  <input type="submit" value="Submit">
</form> 

您可以参考以下页面根据您的要求编写自己的代码

Constraint Validation: Native Client Side Validation for Web Forms

也试试下面的链接，我没试过，但它可能对你有帮助， Custom messages in HTML5