Почему отключает подачу формы, влияющую на атрибуты min и max?

Я делаю команду val <input type = "submit" name = "name" value = "REGISTER" onclick = " this . Disabled = true ; this . Form . Submit (); " >> ation в форме HTML, используя min и max. Я также хочу предотвратить отправку формы, если <input type = "number" name = "endNo" placeholder = "END" min = "5" max = "20" > Отправить клик один раз, чтобы предотвратить отправку нескольких форм до перезагрузки страницы.

Вот встроенный код для отключения кнопки:

checkValidity

Вот код поля ввода номера:

<input type="submit" name="name" value="REGISTER" 
    onclick="if(this.form.checkValidity()){this.disabled=true;this.form.submit();}">

Если я включаю встроенную JS для кнопки <form>, проверка минимальной и максимальной не работает. Когда удаляется, кажется, все работает отлично. Почему это происходит и как я могу удовлетворять обоим условиям, отключить кнопку после щелчка, продолжая проверять минимальные и максимальные значения для поля ввода номера?

Я использую Google Chrome.

javascript,html,google-chrome,

6

Ответов: 4

2 принят
+50

submitМетод по форме элемента делает то , что он обещает, он просто отправляет форму, не делает проверку. Вы можете вручную выполнить валидацию с помощью <form>метода.

onsubmit
1

Я делаю некоторую проверку в форме HTML с использованием атрибутов min и max. Я также хочу предотвратить отправку формы, если кнопка отправки нажата один раз, чтобы предотвратить отправку нескольких форм до перезагрузки страницы.

Как вы сказали, вы хотите предотвратить подачу формы , поэтому вы должны указать свои маркеры на тег. Когда вам нужно обработать событие, всегда атакуйте его , поэтому добавим атрибут:<form method="post" action="my-script.php" onsubmit="return something();">submit<form><script type="text/javascript"> function something() { var v = document.getElementById( "endNo" ).value; alert( "The value is " + v ); return false; } </script>

id

Теперь давайте добавим немного funtion, который говорит нам, что делать. В этом случае давайте покажем результат из ввода:<input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20">

disabled

Я добавил некоторый idатрибут для ввода, обрабатываемого javascript:

onclick

Кнопка submit показывает только return falseсобытие в <form>атрибуте, поскольку оно уже выполняется в теге:<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;"><script type="text/javascript"> function something() { var v = document.getElementById( "endNo" ).value; alert( "The value is " + v ); return false; } </script> <form method="post" action="" onsubmit="return something();"> <input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20"> <input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;"> </form>

<form>
  <input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20" required> <!-- I assume it is required? -->
  <input type="button" id="fakeSubmit" name="name" value="REGISTER"     onclick="submitIfValid()"> <!-- fake submit -->
  <input type="submit" id="submitButton" style="visibility:hidden"> <!-- Actual submit -->
</form>

<script>
 function submitIfValid()
 {
    if(document.getElementById('endNo').value < document.getElementById('endNo').getAttribute("min") || document.getElementById('endNo').value > document.getElementById('endNo').getAttribute("max")) // Get the attributes dynamically and check
     {
       document.getElementById('submitButton').click(); // Simulate a standard click to show error
     }  
     else
     {
       document.getElementById('fakeSubmit').disabled = true; // Disabled it, we got our value
       document.getElementById('submitButton').click(); // Actual submission
     }

 }
</script>

Весь тег выглядит следующим образом:

submit

См. Его в действии: https://jsfiddle.net/darioferrer/mfs3adqm/

Проверьте некоторые аналогичные случаи:

  • При отправке формы вернуть false не работает
  • onSubmit после проверки возврата false и все еще отправить
  • Почему моя HTML-форма все еще отправляется, когда я возвращаю false из onsubmit?
1

Казалось бы, this.form.submit () обходит проверки min / max, даже если вы делаете это в консоли (получение формы по id, а затем вызов submit). Я не думаю, что это связано с вашей настройкой.

Попробуйте этот подход

button

Убедитесь, что вы добавили проверки на стороне сервера. Никогда не доверяйте jQuery или javascript

Примечание. Если оставить пустым, это будет <чем мин.

Примечание 2: Если вы открыто относитесь к jQuery, проверка формы становится намного проще ($ (formid) .valid ()), что делает ее проще, чем мой подход, и в случае проверки нескольких полей. Вы можете прочитать об этом здесь .

0

Вы можете изменить тип входного сигнала от submitдо , button чтобы остановить его от подачи сразу.

 <input type="button" name="name" value="REGISTER" onclick="this.disabled='true';this.form.submit();" />
JavaScript, HTML, Google-хром,
Похожие вопросы
Яндекс.Метрика