我有以下HTML5表单:http://jsfiddle.net/nfgfP/
<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass" type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>Run Code Online (Sandbox Code Playgroud)
目前当我在空白时点击输入时,会出现一个弹出框,上面写着"请填写此字段".如何将该默认消息更改为"此字段不能留空"?
编辑:另请注意,类型密码字段的错误消息很简单*****.要重新创建此项,请为用户名提供值并点击提交.
编辑:我正在使用Chrome 10进行测试.请这样做
我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证.所以我希望能够通过jQuery强制进行表单验证.
我想在不提交表单的情况下触发验证.可能吗?
当我尝试提交一个缺少必填字段的表单时,我的浏览器(Chrome)会显示一条消息,提到有一个字段丢失,如果它不在我的屏幕上,则会向上滚动到它.
我的问题是我的网页上有一个50px的固定标题,结果输入字段被隐藏了,消息似乎无处不在:

代替

有没有解决的办法?
我尝试将50px的边距应用于<html>和<body>
干杯
编辑
这是一个问题的小提琴:http://jsfiddle.net/LL5S6/1/
这个小的HTML5密码字段完美地工作,没有oninvalid属性(模式说:最少6个字符):
<form>
<input type="password" name="user_password_new" pattern=".{6,}" required />
<input type="submit" name="register" value="Register" />
</form>
Run Code Online (Sandbox Code Playgroud)
在这里查看jsFiddle .
但是当我添加一个oninvalid属性,当用户的输入不符合模式时会发出自定义错误消息,整个字段永远不会变为有效,请参阅此处的代码:
<form>
<input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />
<input type="submit" name="register" value="Register" />
</form>
Run Code Online (Sandbox Code Playgroud)
在这里查看jsFiddle .
你能发现错误吗?
如何保留默认的HTML表单验证并禁止表单提交?我试过用event.preventDefault()和return false.两者都成功地阻止了表单的提交,但都失败了表单验证.我也试过这个解决方案,但即使这样也行不通.
有人能帮帮我吗?
带有自定义验证的基本 HTML5 表单。如果提交的值不是数字,浏览器应显示错误消息“字段必须是数字”。如果您输入“abc”并按提交(或按回车键),该字段将被标记为无效,但不会出现错误消息。再次按提交(或按回车键),它将显示消息。这种双重提交行为出现在 Windows 和 OS X 上最新版本的 Firefox、Chrome、Safari 和 IE 上。您会注意到第一次提交时会出现默认的“此字段是必需的...”消息,并且没有显示奇怪的行为。
顺便说一句,我很清楚此验证在旧版本的 IE 中不起作用,并且输入字段可能具有number自动完成此验证的类型;这是我的问题的简化示例,仅用于演示目的。
脚本
var form = document.getElementById("form");
var field = document.getElementById("field");
form.onsubmit = validateForm;
function validateForm() {
if(isNaN(field.value)) {
field.setCustomValidity("Field must be a number.");
} else {
return true;
}
return false;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<form id="form">
<label for="field">Favorite number</label>
<input type="text" id="field" required>
<input type="submit">
</form>
Run Code Online (Sandbox Code Playgroud) 我有一个带有DataRequired验证器和相关错误消息的Flask-WTF表单.但是,Chrome浏览器似乎忽略了我的错误消息,只显示"请填写此字段".如何让Flask覆盖它并显示我的消息?
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired
class SignupForm(FlaskForm):
first_name = StringField('First Name', validators=[DataRequired(message='Hey, put in your first name!')])
last_name = StringField('Last Name', validators=[DataRequired("What, you can't remember your last name?")])
email = StringField('Email', validators=[DataRequired('Gonna need your email address!')])
password = PasswordField('Password', validators=[DataRequired('Really need a password, Dude!')])
submit = SubmitField('Sign Up')
Run Code Online (Sandbox Code Playgroud) 我正在进行HTML5表单验证.如果用户尝试将required输入字段为空的表单提交,则会显示错误消息,如图所示.
但是,我想将错误消息自定义为类似的东西"Please provide a valid password".我怎样才能做到这一点?javascript只是解决方案吗?
-谢谢