Блог

Главная - Вопросы по программированию - Как отключить кнопку до заполнения обязательных полей без использования javascript, только HTML5 и CSS

Как отключить кнопку до заполнения обязательных полей без использования javascript, только HTML5 и CSS

#javascript #html #css #forms

#javascript #HTML #css #формы

Вопрос:

У меня есть следующая форма

 <form action="" method="post">
    <fieldset>
        <legend>Booking Details</legend>
        <div>
            <label for="name">Name:</label>
            <input id="name" name="name" value="" required  pattern="[A-Za-z-0-9] s[A-Za-z-'0-9] " title="firstname lastname" aria-required="true" aria-describedby="name-format">
            <span id="name-format" class="help">Format: firstname lastname</span>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" value="" required aria-required="true">
        </div>
        <div>
            <label for="website">Website:</label>
            <input type="url" id="website" name="website" value="">
        </div>
        <div>
            <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
            <input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
        </div>
        <div class="submit">
            <input type="submit" value="Submit" onclick="alert('martharfarkar')">
        </div>
    </fieldset>
</form>

JS Fiddle ИЗ ПРИМЕРА

Я хочу отправить электронное письмо с помощью веб-сервиса в событии onclick кнопки, но заметил, что событие запускается независимо от проверки формы, поэтому вопрос в том, есть ли способ вызвать событие onclick, только если форма действительна без использования javascript? возможно, HTML5 может предложить что-то новое

Комментарии:

1. Нет, это невозможно без JS.

2. Что вы используете для отправки электронной почты? JS, PHP, .net и т. Д.?

3. Если бы у вас были все ваши входные данные (включая отправку) в одном родительском файле, вы могли бы это сделать input:invalid ~ input[type=submit] {pointer-events: none; opacity: .2;} .

4. не выполняя отправку, я использую событие onclick кнопки для вызова метода JS и вызова веб-сервиса с помощью JSON

Ответ №1:

Я думаю, проблема в том, что вы привязываете действие к нажатию кнопки, а не к отправке формы. Итак, здесь происходят две вещи:

  • Вы фактически используете javascript в onclick="alert('whatever')"
  • Вы привязываете этот скрипт к нажатию кнопки, а не к отправке формы

Ваша проверка работает нормально для действия отправки. Рассмотрите возможность использования параметра action в форме, а не параметра onclick в кнопке ввода.

РЕДАКТИРОВАТЬ: чтобы быть более точным <input type="submit" value="Submit"> , действие щелчка по умолчанию — отправка формы.

Надеюсь, это поможет!

Комментарии:

1. Я не могу использовать submit, но я понимаю вашу точку зрения, думаю, мне все-таки придется реализовать JS, спасибо!

Ответ №2:

Когда мне нужна дополнительная проверка, я изменяю отправленный ввод на элемент «a» с «id», который я могу проверить с помощью функции jquery click. Итак, я проверяю и запускаю отправку вручную. Пример: $(‘#FormID’).submit ().

Ответ №3:

Наилучший возможный способ — привязать действие к событию onsubmit формы, а не к событию onclick кнопки, как упоминал пользователь onepopcorn. Это можно сделать с помощью 

 <form action="" method="post" onsubmit=alert('whatever')>

вместо того, чтобы использовать onclick для кнопки отправки.

Комментарии:

1. не выполняя отправку, я использую веб-сервис и событие onclick кнопки