prevent input from submitting when empty (not in form)

Question

I have some rogue input and submit buttons that add new items in a list, I want to prevent them from being submittable when they have nothing in them. They look like this:

<input name="name" placeholder="Application Name">
<button type="submit">Add App</button>

I have a bunch of them, I was wondering if there was some way I could get all of them not to submit when they have nothing in them. Thanks!

FLX · Accepted Answer · 2014-05-22 14:29:45Z

2

Yes, just add the required attribute.

<input name="name" placeholder="Application Name" required>

answered May 22, 2014 at 14:29

FLX

2,6804 gold badges30 silver badges59 bronze badges

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

2 Comments

ajmajmajma Over a year ago

Excellent, thank you! Does this work on all browsers and all that?

FLX Over a year ago

yes, all moderns browsers. (use caniuse to see the support, excellent site caniuse.com/form-validation). You can also set a pattern, to check per example if the value is a valid mail, a number, etc...

Patrik Krehák · Accepted Answer · 2014-05-22 14:36:41Z

There are 2 solutions...

Solution is set HTML5 attribute required
Solution is set function on form, so on submit, function will be processed and return false; will prevent submiting:

<form action="" method="post" onSubmit="checkInputs();return false;" id="form">

Then you can go through every input:

$('#form input').each(function() {

And finally, you will check, if is that input text type and if is empty:

if( type == 'text' && value.length == 0 )

Here is FIDDLE DEMO

Akhilesh Darjee · Accepted Answer · 2014-05-22 15:11:48Z

'required' attribute is not supported in Internet Explorer 9 and earlier versions, or in Safari.
Include the input and button inside a form and validate the form on submit.

HTML Code :

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form name="app_form" id="app">
    <input name="name" id="name" placeholder="Application Name">
    <button type="submit">Add App</button>
</form>

JS Code :

$("#app").submit(function(event) {
    if (!$("#app #name").val()) {
        alert("Please enter Application Name.");
        event.preventDefault();  // this will prevent form submission
});

Collectives™ on Stack Overflow

prevent input from submitting when empty (not in form)

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related