Могу ли я использовать события onclick и onsubmit вместе?

Question

Я делаю страницу регистрации на сайте, на которой мне нужно сначала проверить свою форму, а затем, если форма действительна, мне нужно запустить какую-то функцию

Я бы не предпочел jquery.Пожалуйста, предложите ответы с js. В прошлом я пробовал эту функцию, но работает только функция onclic ... когда форма действительна и я нажимаю кнопку, ничего не происходит

<form onsubmit=" // function to take place on submit  "> // This 
// function should take place if form has been validated by alerts as // well
<input required>
<input required>
<button type="submit" onclick="fn(); fn2(); fn3()" // I need to use onclick here as // these functions are validations using javascript alert
</form>

обязательный атрибут дляпроверка Я проверяю форму с помощью проверки браузера javascript.Но проверка предупреждений javascript предназначена для чисел (например, я использовал условие if для принятия числа, только если оно колеблется от 1 до 10). Функции, переданные onlick, не будут отображать ничего, если форма верна.И после этого мне нужно, чтобы он отображал некоторую информацию только в том случае, если форма действительна.

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

Answer 1

Вам не нужно использовать отдельные функции для нажатия кнопки «Отправить» и отправки формы, они в основном одинаковы, потому что вы устанавливаете тип кнопки в качестве кнопки.

вы можете использовать только одну (что было бы лучше)Можно выбрать любой из них, но я предлагаю вам $form.submit, и вы можете написать это так

$yourFormVar.onsubmit = function(e){
   e.preventDeault();

   if($firstInput.value !== '1' || '2' /*... I am not very good at RegExp so you can use it*/){
       return alert('input value must be number greater than 1 and less then 10');
   }
   //other validations (with return statement);
   //now you can send variables to server;
   //i do not know technology you are using and i will use axios in this example;
   axios.post('/route', {
      data: $yourFormVar.serialize()
   })
   .then(res => {
     alert(res.data)
   })    
}

Answer 2

Добро пожаловать, Бакиболл, если я вас правильно понял, вам нужно несколько проверок и затем отправить свои данные.

A) Если у вас возникли проблемы с использованием min и max,Вы можете попробовать pattern с регулярным выражением.

<form>
  <input pattern="\b([1-9]|10)\b" title="Number between 1 and 10" required>
  <button>Submit</button>
</form>

https://jsfiddle.net/80mbd62w/

B) Если вы хотите проверить с помощью JS.

<form>
  <input required>
  <button>Submit</button>
</form>

JS

const $input = document.querySelector('input')

document.querySelector('form').onsubmit = e => {
  // You can add as many validations as you want
  if (!/\b([1-9]|10)\b/.test($input.value)) {
    alert('Number has to be between 1 and 10')
    e.preventDefault() // aborting
  } else {
    alert('ok') // after this the data will be submitted
    e.preventDefault() // don't forget to remove this line
  }
}

https://jsfiddle.net/so2ecwrL/

C) Если вы хотите использовать onclick и onsubmitсобытия.

document.querySelector('form').onsubmit = e => {
  alert('submit')
  e.preventDefault() // don't forget to remove this line
}

document.querySelector('button').onclick = e => {
  alert('button')
}

https://jsfiddle.net/uf4wxnoy/

Надеюсь, что эта помощь или, по крайней мере, направит вас в правильном направлении:)

Answer 3

Да, вы можете иметь onSubmit и onClick на кнопку отправки.В приведенном ниже примере появятся два окна с предупреждениями.Однако, если вы сделаете кнопку type = "button" и добавите theForm.submit () в функцию onClick для фактической отправки формы, onSubmit НЕ будет запущен.Он запускается только кнопкой type = "submit".Чтобы обойти это, просто вызовите функцию onSubmit непосредственно из функции onClick, прежде чем отправлять форму вручную.

<form onsubmit="myFunction()">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit" onClick="mySubmit(this.form)">
</form>

<script>
function myFunction() {
  alert("The form was submitted");
}

function mySubmit(theForm) {
    alert("My Submit");
}
</script>