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>

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>

• javascript
• html
• forms

• 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 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 Commented Sep 15, 2014 at 6:16

4 Answers 4

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();      
});

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

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.

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>