jQuery添加必需的输入字段

171

我一直在寻找使jQuery自动使用html5验证将必需的内容写入我所有输入字段的方法，但是我很难告诉它在哪里编写它。

我要吃这个

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150">

并将它自动添加所需的结束标记前

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150" required>

我以为我可以按照

$("input").attr("required", "true");

但这是行不通的。任何帮助是极大的赞赏。

javascript jquery validation

— 三浦市
source

2

它没有包裹在dom中吗？$(function(){....});

— PSL 2013年

我正在使用jsfiddle.net/japaneselanguagefriend/LEZ4r

— 三浦市

如果'input'是一个id，则jquery在这里的选择器中缺少＃。

— 约翰·迈耶

@JohnMeyer“输入”是标签选择器。如果定位输入标签，则不需要＃

— -Spartacus

420

$("input").prop('required',true);

DEMO FIDDLE

— 未知
source

1

嗯，添加了一个提交按钮，但仍然没有验证或将必需的属性添加到输入字段。jsfiddle.net/japaneselanguagefriend/LEZ4r

— 三浦市

1

@JohnMeyer“ input”是标签选择器

— morefromalan

1

遇到了一个TypeError: element.prop is not a function错误

— davideghz

@ Miura-shi您<form></form>在jsFiddle中缺少标签

— -JESTech

如果它可以帮助某人：最初这对我没有用，因为我在调用.prop('required',true)输入之前先对其进行调用.css("display", "block")。

— 电版'18

52

您可以通过使用attr来做到这一点，您犯的错误是您将真正的内引号引起来。而不是尝试这个：

$("input").attr("required", true);

— 乔兹·纳文·乔兹
source

2

@JohnMeyer“ input”是标签选择器的名称

— dave4jr

required是布尔型属性，应仅被省略（对于“ false”），或与它的名称（即"required"，“ true”）具有相同的值。实际上使用起来更好.prop()。

— Alnitak

@Alnitak不是，如果您要使网站与IE兼容，prop()则不能像在现代浏览器上那样在该网站上工作。仍然最好使用$(ele).attr("required", true)和false删除。

— 奥利弗·海沃德

29

我发现以下实现是有效的：

$('#freeform_first_name').removeAttr('required');

$('#freeform_first_name').attr('required', 'required');

这些命令（attr，removeAttr，prop）的行为会有所不同，具体取决于所使用的JQuery版本。请在此处参考文档：https : //api.jquery.com/attr/

— 约翰·迈耶
source

6

使用.attr方法

.attr(attribute,value); // syntax

.attr("required", true);
// required="required"

.attr("required", false);
//

使用 .prop

.prop(property,value) // syntax

.prop("required", true);
// required=""

.prop("required", false);
//

从这里了解更多

https://stackoverflow.com/a/5876747/5413283

— 德克斯特
source

4

我发现jquery 1.11.1不能可靠地做到这一点。

我曾经使用$('#estimate').attr('required', true)和$('#estimate').removeAttr('required')。

删除required不可靠。有时会使该required属性失去价值。由于required是布尔值商品，因此浏览器将其仅显示为无值，而没有价值true。

这个错误是断断续续的，让我厌烦了。切换到document.getElementById("estimate").required = true和document.getElementById("estimate").required = false。

— 多丽丝·加曼塔勒（Doris Gammenthaler）
source

removeAttr对我不起作用。然后，我使用您的解决方案，并且工作正常。谢谢！

— 迭戈·索马尔

4

不应使用双引号 “” 将true括起来，它应该像

$(document).ready(function() {            
   $('input').attr('required', true);   
});

也可以用道具

jQuery(document).ready(function() {            
   $('input').prop('required', true);   
});

您可以尝试按要求代替true。如

$('input').prop('required', 'required');

— 罗坎·纳什普（Rokan Nashp）
source