My alert message pop ups before the loading/submission of a record, so if the user didn't input any data. It still pops up. What additional javascript function should I use for my alert box?

Here's my code

function myFunction() {
    alert("Adding Succesful!");
}

<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
 <input name="bName" class="form-control req" required/> 

<button type="submit" class="btn btn-default bt"  onclick="myFunction()" style="align:right;">ADD</button>

My alert message pop ups before the loading/submission of a record, so if the user didn't input any data. It still pops up. What additional javascript function should I use for my alert box?

Here's my code

function myFunction() {
    alert("Adding Succesful!");
}

<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
 <input name="bName" class="form-control req" required/> 

<button type="submit" class="btn btn-default bt"  onclick="myFunction()" style="align:right;">ADD</button>

• javascript
• php
• jquery

• If you want to display the alert after something happens then you'd need to write the code in response to that event. If the form is being submitted via AJAX then you'd display the alert in the response handler for the AJAX call. If the form is being submitted at the browser level then you'd need to display the alert on the next page instead of this one. – David Commented Oct 18, 2015 at 13:40
• Do you mean you need to stop submission of the form when form validation fails ? if so, add return false; to your myFunction when your form validation fails. – Sachin Commented Oct 18, 2015 at 13:41
• or atleast the "required/" must first shows up before the alert – Vista Commented Oct 18, 2015 at 13:45
• @Sachin If there is any false validation the alert message will not pop up – Vista Commented Oct 18, 2015 at 13:48
• You have only one input field? – Sandeep Nayak Commented Oct 18, 2015 at 13:52

2 Answers 2

Use HTML5 validity checks to see if the form is valid or not.

var form = document.getElementById('f');

function myFunction() {
  if (form.checkValidity()) {
    alert("Adding Succesful!");
  }
}

<form id="f">
  <label for="bName" class="control-label col-xs-4">
    <p class="left">Brand Name</p>
  </label>
  <input name="bName" class="form-control req" required/>

  <button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
</form>

Try using:

<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
 <input name="bName" class="form-control req" required/> 

<button type="submit" class="btn btn-default bt"  onclick="return myFunction(this)" style="align:right;">ADD</button>

(note I changed the onclick to include a return and a this)

And use it with the JavaScript:

function myFunction(t)
{
    if($(t).prev().val())
    {
        alert('Adding Succesful!')
        return true;
    }else{
        return false;
    }
}