相关疑难解决方法(0)

HTML5表单必需属性.设置自定义验证消息?

我有以下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进行测试.请这样做

html javascript forms validation html5

291
推荐指数
12
解决办法
47万
查看次数

如何在不通过jQuery提交的情况下强制执行html5表单验证

我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证.所以我希望能够通过jQuery强制进行表单验证.

我想在不提交表单的情况下触发验证.可能吗?

validation jquery html5

259
推荐指数
9
解决办法
24万
查看次数

需要HTML5输入,在提交时滚动到带有固定导航栏的输入

当我尝试提交一个缺少必填字段的表单时,我的浏览器(Chrome)会显示一条消息,提到有一个字段丢失,如果它不在我的屏幕上,则会向上滚动到它.

我的问题是我的网页上有一个50px的固定标题,结果输入字段被隐藏了,消息似乎无处不在:

隐藏输入字段

代替

输入字段显示

有没有解决的办法?

我尝试将50px的边距应用于<html><body>

干杯


编辑

这是一个问题的小提琴:http://jsfiddle.net/LL5S6/1/

html javascript css html5

47
推荐指数
5
解决办法
2万
查看次数

HTML5:为什么我的"oninvalid"属性让模式失败?

这个小的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 .

你能发现错误吗?

html5 input

31
推荐指数
2
解决办法
3万
查看次数

阻止表单提交但保留表单验证

如何保留默认的HTML表单验证并禁止表单提交?我试过用event.preventDefault()return false.两者都成功地阻止了表单的提交,但都失败了表单验证.我也试过这个解决方案,但即使这样也行不通.

有人能帮帮我吗?

javascript forms validation jquery

13
推荐指数
2
解决办法
6402
查看次数

自定义 HTML5 表单验证最初未显示自定义错误

带有自定义验证的基本 HTML5 表单。如果提交的值不是数字,浏览器应显示错误消息“字段必须是数字”。如果您输入“abc”并按提交(或按回车键),该字段将被标记为无效,但不会出现错误消息。再次按提交(或按回车键),它将显示消息。这种双重提交行为出现在 Windows 和 OS X 上最新版本的 Firefox、Chrome、Safari 和 IE 上。您会注意到第一次提交时会出现默认的“此字段是必需的...”消息,并且没有显示奇怪的行为。

http://jsfiddle.net/6gsr3r4b/

顺便说一句,我很清楚此验证在旧版本的 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)

html javascript validation

6
推荐指数
1
解决办法
1万
查看次数

如何在Flask中验证失败时覆盖html默认"请填写此字段"?

我有一个带有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)

python flask wtforms flask-wtforms

6
推荐指数
1
解决办法
1687
查看次数

以HTML5格式自定义空输入字段错误消息

我正在进行HTML5表单验证.如果用户尝试将required输入字段为空的表单提交,则会显示错误消息,如图所示.在此输入图像描述

但是,我想将错误消息自定义为类似的东西"Please provide a valid password".我怎样才能做到这一点?javascript只是解决方案吗?

-谢谢

javascript html5

5
推荐指数
1
解决办法
971
查看次数

标签 统计

html5 ×5

javascript ×5

validation ×4

html ×3

forms ×2

jquery ×2

css ×1

flask ×1

flask-wtforms ×1

input ×1

python ×1

wtforms ×1