Form is not getting validated using javascript?

Question

I have made a add button in upper right corner (see 1st screenshot) when I click on it, it displays form which has 3 input fields for adding name, contact number, group name and at last submit button.

I have added required attribute in input field of form but it does not work when I click on submit button it submits blank details (see 2nd screenshot)

in app.js:

I am dynamically adding HTML using javascript:

    <div class="row">
    <div class="col-lg-12" id="addNewContact">
     <form>
      <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" class="form-control" id="nameInput">
      </div>
      <div class="form-group">
          <label for="number">Number:</label>
          <input type="text" class="form-control" id="numberInput">
      </div> 
      <div class="form-group">
          <label for="group">Group:</label>
          <input type="text" class="form-control" id="groupInput">
      </div> 
      <button type="button" class="btn btn-success" onclick="submitToDb()">Submit</button>
    </form>
    </div>
</div>

Screnshot:

Blank fields are displayed see screenshot:

change your type to button and not submit, you bind an onclick to an element that submits the entire form and does not trigger your javascript. — user4573148
– user4573148, Commented Feb 8, 2018 at 16:44
@Programmer I am trying this example w3schools.com/js/tryit.asp?filename=tryjs_validation_html — stone rock
– stone rock, Commented Feb 8, 2018 at 16:46
@Programmer If the browser doesn't know it's submitting, why will it perform the required checks? — Barmar
– Barmar, Commented Feb 8, 2018 at 16:46
@Barmar I am trying this example w3schools.com/js/tryit.asp?filename=tryjs_validation_html — stone rock
– stone rock, Commented Feb 8, 2018 at 16:46
Are you certain that your input values are empty? What happens if you remove the value attributes in your html? — sliptype
– sliptype, Commented Feb 8, 2018 at 16:47

Barmar · Accepted Answer · 2018-02-08 16:57:25Z

3

Instead of using onclick, use onsubmit on the form.

<form onsubmit="submitToDb()">

Form validation is done when processing the submit event. If you use a button click to submit the form, that happens before the default submission occurs.

edited Feb 8, 2018 at 16:57

answered Feb 8, 2018 at 16:55

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

13 Comments

Barmar Over a year ago

As far as I can tell, the only difference is the name of the function.

stone rock Over a year ago

I changed onclick() to onsubmit() and now it works like a charm. If you liked my question please do upvote it. Thank you :)

stone rock Over a year ago

I onsubmit() is not working ? when I click it on submit it does not submits it onclick it just becomes static why so ?

Barmar Over a year ago

You don't have required in the jsfiddle.

stone rock Over a year ago

when I click on submit button with onclick() it atleast displays blank fields but with onsubmit() it does nothing ?

|

Collectives™ on Stack Overflow

Form is not getting validated using javascript?

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related