CODEWITHSUNDEEP
javascripthtmlvalidation
sidrao2006
sidrao2006

Reputation: 1328

Can I use onclick and onsubmit events together?

I am making a website sign up page in which I need to first validate my form and then if the form is valid i need to run some function

I would not prefer jquery. Please suggest answers with js.In the past,I've tried this function but only the onclic function works...when the form is valid and i click the button nothing happens 

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

required attribute is for validation I am validating the form with javascript browser validation. But the javascript alert validation is for numbers(for eg. i used if condition to accept a number only if it ranges from 1 to 10).The functions given to onlick will not display anything if form is valid. And onsubmit i need it to display some information only if form is valid.

I expect that if the form is invalid then the alert functions i have given to onclick should work and when the form is valid, when i click the submit button it should display the message.

Upvotes: 1

Views: 2527

Answers (3)

gengns
gengns

Reputation: 1633

Welcome Buckyball, if I understood you well, you need some validations and then submit your data.

A) If you have some problems using min and max, you can try a pattern with a regular expression.

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

https://jsfiddle.net/80mbd62w/

B) If you want to validate with 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) If you want to use onclick and onsubmit events.

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/

Hope this help or at least point you to the right direction : )

Upvotes: 1

iLiA
iLiA

Reputation: 3153

You Do not need to use separate functions for submit button click and form submit, they are basically same because you set submit as button type.

you can use only one (that would be better practise) you can choose any of them but i suggest you $form.submit and you can write it like this

$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)
   })    
}

Upvotes: 0

Stewart McGuire
Stewart McGuire

Reputation: 1

Yes, you can have an onSubmit AND an onClick on the submit button. The example below will produce two alert boxes. However, if you make the button a type="button" and add theForm.submit() in the onClick function to actually submit the form, the onSubmit will NOT be fired. It is only fired by a type="submit" button. To get around that, just call the onSubmit function directly from within your onClick function before you submit the form manually.

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

Upvotes: 0

Related Questions