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

— Миура-ши
источник

2

Разве это не завернуто в готовом доме? $(function(){....});

— PSL

Я использую этот jsfiddle.net/japaneselanguagefriend/LEZ4r

— Miura-shi

если 'input' - это идентификатор, то jquery здесь не содержит # в селекторе.

— Джон Мейер

@JohnMeyer "input" - это селектор тегов. Не нужно #, если вы нацелены на теги ввода

— Спартак,

420

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

DEMO FIDDLE

— неизвестный
источник

1

Хм, добавлена кнопка отправки, но по-прежнему не выполняется проверка или добавление обязательного атрибута в поля ввода. jsfiddle.net/japaneselanguagefriend/LEZ4r

— Miura-shi

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")его.

— электротип

52

Вы можете сделать это с помощью attr, ошибка, которую вы допустили, заключается в том, что вы поместили истину в кавычки. вместо этого попробуйте это:

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

— Йоз Навин Джоз
источник

2

@JohnMeyer "input" - это имя селектора тега

— dave4jr

requiredявляется логическим атрибутом и должен только опускаться (для «false») или иметь то же значение, что и его имя (то есть "required") для «true». Это на самом деле лучше использовать .prop().

— Альнитак

@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/

— Джон Мейер
источник

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

— правый
источник

4

Я обнаружил, что jquery 1.11.1 не делает это надежно.

Я использовал $('#estimate').attr('required', true)и $('#estimate').removeAttr('required').

Удаление requiredне было надежным. Иногда requiredатрибут оставляется без значения. Поскольку requiredэто логическое значение attibute, его простое присутствие без значения рассматривается браузером какtrue .

Эта ошибка была прерывистой, и я устал от нее возиться. Перешел на document.getElementById("estimate").required = trueи document.getElementById("estimate").required = false.

— Дорис Гамментхалер
источник

removeAttrне работает для меня Тогда я использую ваше решение и работает нормально. Спасибо!

— Диего

4

Не следует заключать верно с двойной кавычки «» она должна быть

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

Также вы можете использовать опору

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

Вместо истины вы можете попробовать обязательно. Такие как

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

— Рокан Нашп
источник