i want to check form validation by input type button, not by submit, could any one help in this?

Question

i want to only validate the form and don't want to submit it, so that i can use the form values in modifying other part of the same html page by calling a function "myfunction()" after form validation. for this i want to use a button suggest me required code.my code is following :-

            <form name="form1">
                <input type="text" name="name1" required></input>
                <button onclick="myfunction()" ></button>        // i want to validation of form by this button
            </form>

Button elements in a form are submit buttons by default. Change the type to button using <button type="button"...>Validate</button> so that clicking the button doesn't submit the form. Note that the form can still be submitted without clicking the button. — RobG
– RobG, Commented Sep 14, 2014 at 23:35
@RobG, thak you to give this information. i did not know this fact that button works like submit by default. — PRASHANT KUMAR
– PRASHANT KUMAR, Commented Sep 15, 2014 at 6:16

Ashutosh · Accepted Answer · 2014-09-14 22:06:08Z

2

You can try this by setting onsubmit event of form to return false; as follows:

<form name="form1" onsubmit="return false;">
    <input type="text" name="name1" required></input>
    <button onclick="myfunction();" ></button>
</form>

This will not submit the form on clicking the button but will execute myfunction() instead.

If you know jQuery, then you can do this as follows:

$('form[name="form1"]').submit(function (event) {
    // This will prevent form being submitted. 
    event.preventDefault();
    // Call your function.
    myfunction();      
});

answered Sep 14, 2014 at 22:06

Ashutosh

3241 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Horen · Accepted Answer · 2014-09-14 22:01:37Z

1

For maintainability consider adding an event listener to the button by selection instead of inline. When the button is clicked an event object is passed to the callback. Event objects have a number of properties and methods. In this case you're looking for the method "preventDefault" which prevents the default action of the event which in this case is a form submit. An example:

<form name="form1">
  <input type="text" name="name1" required />
  <button id="my-button"></button>
</form>

document.getElementById('my-button').addEventListener('click', function(e){

  e.preventDefault();

  var form = document.forms['form1']; //or this.parentNode

  //do stuff


}, false);

answered Sep 14, 2014 at 22:01

Mike Horen

912 bronze badges

Comments

PRASHANT KUMAR · Accepted Answer · 2014-09-15 06:25:40Z

0

i have achived this goal by modifying code as follow:-

          <form name="form1" onsubmit="myfunction();return false;">
          <input type="text" name="name1" required></input>
          <button >check form and call function</button>  
          </form>

by this i am able to check form and call my function and form is also not submitted in this case. now i want to reset the form without clicking any button. suggest javascript code for this.

answered Sep 15, 2014 at 6:25

PRASHANT KUMAR

1853 gold badges3 silver badges11 bronze badges

Comments

Nxt_N_C · Accepted Answer · 2021-05-04 09:01:52Z

0

HTML form validation by input type button, not by submit.

Try this

<form name="form1" onsubmit="myfunction(); return false;">
    <input type="text" name="name1" required></input>
    <button type="submit">Submit</button>  
</form>

answered May 4, 2021 at 9:01

Nxt_N_C

611 silver badge3 bronze badges

Collectives™ on Stack Overflow

i want to check form validation by input type button, not by submit, could any one help in this?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related