Как дублировать функциональность «требуется ввод» без отправки с формой?

Я хотел бы, чтобы встроенная функциональность наличия текста input (в середине другого текста inputs) проверялась и помечалась (т.е. красная рамка по умолчанию, применяемая вокруг текстового поля), чтобы убедиться, что он заполнен до того, как пользователь щелкнет кнопку form submit, не включая это значение в отправку формы. В принципе, я не хочу отправлять повторно набранный пароль с формой, но его, конечно, нужно заполнить (и он будет проверяться на стороне клиента). Есть ли "простой" способ сделать это?


forms input html required
person Conrad    schedule 12.03.2015    source источник
comment
@sircapsalot, можно что-нибудь поконкретнее?   -  person Conrad    schedule 12.03.2015
comment
Если он находится в форме, он будет отправлен, когда пользователь нажмет кнопку «Отправить». Нет никакого способа переопределить это AFAIK. Ваши варианты перемещают его за пределы формы (что может быть невозможно в зависимости от того, как вы настроили HTML) или просто игнорируете его на стороне сервера.   -  person Tim    schedule 12.03.2015
comment
Не проверял это, но вы можете попробовать изменить действие формы на хеш-место, чтобы оно никуда не ушло, а затем, если оно успешно, измените его обратно на то, что должно быть, и программно повторно отправьте   -  person MDEV    schedule 12.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вот очень минимальный пример того, что вы хотите.

Вы можете реализовать этот тип логики, используя такие события JavaScript, как onblur, onfocus, onchange и т. д.

Вот пример, показывающий, как вы можете проверить, есть ли в поле значение.

var validate = function(element) {
    // element is HTMLInputElement
    if (element.value == "") {
        element.className = "border-red";
    } else {
        element.className = "";
    }
}
.red {
    color: red;
}

.border-red {
    border: 2px solid red;
}
<form>
    Required: <input type="text" name="required_field" onblur="validate(this)" />
    Optional: <input type="text" name="optional" />
</form>

person ddavison    schedule 12.03.2015