Forms - Button types and required inputs

Question

This post is about 'required' inputs not working in buttons with type 'button'.

I have a form that looks something like this:

<form action="submit.php" method="post">

<label for="username">Start Date</label>
<input id="username" name="inputUsername" type="text" required>

<button type="submit">Submit</button>
<button type="button" onclick="updateUsername()">Update</button>

</form>

When the user clicks on Submit, the form runs the script, submit.php.

When the user clicks on Update, there's an AJAX call for a different script, update.php.

These scripts all run fine except that if you click on the Update button when the text input is empty, it goes through anyways without alerting the user with "Please fill out this field." even though it is 'required'.

I know that the reason this is happening is because its type is button and not submit. However, I can not have two submit types because if I have something like the following:

<form action="submit.php" method="post">

...

<button type="submit">Submit</button>
<button type="submit" onclick="updateUsername()">Update</button>

</form>

It will run the submit.php script AND my other script update.php in my JavaScript function updateUsername() when I ONLY want it to run update.php.

Thanks for any suggestions.

score 0 · Answer 1 · answered Mar 25 '17 at 23:51

0

Ok the I think the function call Ajax directly with out validation my be you need to use if statement to check the value and with in this if statement put your Ajax

answered Mar 25 '17 at 23:51

Osama

2,912
1
12
15

It's true that my Ajax call doesn't have any validation, I will look into that. Thank you! – Cait Mar 25 '17 at 23:53

score 0 · Answer 2 · answered Mar 26 '17 at 01:25

You can validate whether or not the username input have a value using val method on your [ajax].

$(document).ready(function() {
    var sUserName = $('#updateUsername').val();
    if ($.trim(sUserName) === '') {
        alert(''Provide a user name');
    }
});

Hope this helps

score 0 · Answer 3 · edited May 23 '17 at 12:17

Here's an ugly solution inspired by this answer.

As you discovered, HTML5 validation will only show upon submitting the form. So your second button needs to submit the form. However, submitting the form will run another script, so we need to prevent that from happening.

What you can do is, upon clicking on the button, you could save the name of the button that was clicked using onclick attribute. We will store the value as a form's property to make it easier to retrieve in the next step. Then, we can use onsubmit attribute to determine which button was clicked to do the appropriate action.

function doAction() {
   if (myform.clicked === 'update') {
       updateUsername();
       // prevent form from submitting
       return false;
   }
}

function updateUsername() {
   alert('do ajax call');
}

<form id="myform" method="post" action="submit.php" onsubmit="return doAction()">

<label for="username">Start Date</label>
<input id="username" name="inputUsername" type="text" required>

<button name="submit" type="submit" onclick="myform.clicked=this.name">Submit</button>
<button name="update" type="submit" onclick="myform.clicked=this.name">Update</button>
</form>

This is why I avoid using HTML5 validation and just write my own.

Forms - Button types and required inputs

3 Answers3