标签: html5-validation

我是HTML5中的新手,我有以下问题.在页面中我有一个像这样的输入标签:

<input id="codiceFiscaleEnte" class="form-control" name="numeroProtocollo" type="number" th:value="*{codiceFiscaleEnte}" required="required"></input>

我必须对它进行一些验证.

所以我知道required ="required"属性意味着用户必须为该字段插入一个值,并且type ="number"指定该值必须代表一个数字.

现在我的问题是:我能以某种方式指定这个数字必须由11位数组成吗？如何使用HTML5属性执行此操作？

我是第一次使用HTML5表单,我想使用新的模式属性.这是一个正则表达式(我以前没用过)所以我有点迷失了.我想要的基本规则是"最少5个字符"

我试过了:

pattern="([0-9][A-Z]){5}"

但这不起作用所以我显然遗漏了一些明显的东西.如果有人能帮助我,我将不胜感激.

我可以将HTML5属性添加到元素中以进行连线验证吗？

如果是这样,它似乎对我不起作用.我需要做些额外的事吗？

http://jsfiddle.net/FcM2A/1/

vm required<input data-bind="value: num1, valueUpdate: 'afterkeydown'"/><br/>
HTML5 required<input required="true" data-bind="value: num2, valueUpdate: 'afterkeydown'" /><br/>
num1 isValid: <span data-bind="text: num1.isValid()"></span><br/>
num2 isValid: <span data-bind="text: num2.isValid()"></span>
<p data-bind="text:ko.toJSON($root)"></p>

ko.validation.init( {parseInputAttributes: true, writeInputAttributes: true} ); //enable HTML5 validation, write HTML5 validation attributes to the controls

var viewModel = {
    num1: ko.observable("1").extend({ required: true }),
    num2: ko.observable("2")
};
ko.applyBindings(viewModel);

我试图想出一个HTML5表单的有效模式.我想允许所有大写和小写字母,空格,数字和符号/\@#$%&.

我尝试了几种不同的格式,但我没有运气.

到目前为止,我有:

Address: <input type="text" name="Address" size="25"  pattern="[a-zA-Z0-9 ]{2,35}]" title="Title" required/>

我正在尝试使用formy-react来摆脱浏览器的默认验证逻辑,并且根据文档," formNoValidation "属性应该可以解决问题.但我无法让它发挥作用.

我究竟做错了什么？

var React = require('React');
var Formsy = require('formsy-react');
var Input = require('./forms/Input.js');

module.exports = React.createClass({
    render: function () {
        return (
           <Formsy.Form>
              <Input ref="phonenumber" id="phonenumber" value={this.state.phonenumber.value} name="phonenumber" required validations="isNumeric" validationError="Please provide a valid phone number" />
           </Formsy.Form>
        );
    }
});

Input.js

var Formsy = require('formsy-react');
var React = require('React');

module.exports = React.createClass({
    mixins: [Formsy.Mixin],

    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },

    render: function () {
        var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null; …

我正在使用最新版本的 Cypress 为我的应用程序 Javascript 构建功能测试。我在 Mac OS X 上的内置电子浏览器和 Chrome 上运行它们（所有更新/升级都适用于浏览器和操作系统）。在两个浏览器中运行测试时，我遇到了同样的问题。

当表单值更改时，将调用我的 JS 函数之一。它检查该值，如果它无效，则在该输入上使用 HTML5 setCustomValidity() 函数来设置消息并阻止表单提交。这在浏览器中具有正确的效果。

在 Cypress 中，我想我可以编写一个测试检查以查看是否通过执行以下操作来进行此 setCustomValidity() 调用：

cy.get('#myinputelement').its('validationMessage').should('have.value', 'My custom validation message')

但它抱怨输入元素没有属性“validationMessage”（即使它确实出现在浏览器控制台的 DOM 中）。与选择器匹配的输入元素确实存在，因为在同一元素上调用 .type() 会正确地用一个值填充它。

赛普拉斯能看到validityMessage 属性吗？如果没有，我该如何测试赛普拉斯对 setCustomValidity() 的 JS 调用？

在symfony 2中,我有一个name我要验证它的文件,如果它包含数字,我想显示一条消息.我的代码是:

//Entity/Product.php
 /**
     * @ORM\Column(name="`name`", type="string", length=255)
     * @Assert\NotBlank()
     * @Assert\NotNull()
     * @Assert\Regex(pattern="/[0-9]/",match=false,message="Your name cannot contain a number")
     */
    protected $name;

但是当我在字段中写一个数字时,我会看到此消息,Please match the requested format因为我的字段代码如下所示:

<input type="text" id="mzm_testbundle_category_name" name="mzm_testbundle_category[name]" required="required" maxlength="255" pattern="((?![0-9]).)*">

输入标签有一个模式和错误,我看到是来自HTML5.我怎样才能解决这个问题呢？

我正在尝试在我的项目中实现 HTML5 验证。似乎非常有用且易于使用。但是，此验证仅在输入类型设置为 时才有效submit。那部分给我带来了问题。我有多个表单，并且name在所有提交按钮上使用相同的属性。所以我的函数是这样的：

HTML：

<form name="myForm" id="myForm" method="POST" action="#">
    <fieldset>
        <legend>User Info</legend>
        <div class="formItem">
            <label for="last_name">Last Name:</label>
            <input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
        </div>
        <div class="formItem">
            <label for="first_name">First Name:</label>
            <input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
        </div>
        //Same button I have on the other forms. Only ID is different.
        <div class="formItem">
            <p align="center"><input type="button" name="frmSubmit" id="frmstSubmit" value="Submit"></p>
        </div>
    </fieldset>
</form>

查询：

$('input[name="frmSubmit"]').on('click', function(){
    var …

有没有一种使用html5自动表单验证来查找表单中哪些子元素无效的方法？

我知道我们可以通过调用checkValidity（）方法逐个元素地检查。我正在寻找的是，如果有更短的方法。

例如，

var contactForm = document.getElementById('contact-form');
if (contactForm.checkValidity() == false) {
    // something like contactForm.getInvalidChildren() and apply 
    // different style and error message based on the child type
}