How to alert user for blank form fields?

Question

I have this form that has 3 inputs and when a user leaves a field blank a dialogue box pops up to alert the user a field is blank. The code I have below only works for 2 specific input. When i try adding another input to the code it doesnt work. It only works for 2 inputs. How can I make it work for all three?

<script type="text/javascript">
function val(){
    var missingFields = false;
    var strFields = "";
    var mileage=document.getElementById("mile").value;
    var location=document.getElementById("loc").value;




    if(mileage=='' || isNaN(mileage))
    {
    missingFields = true;
    strFields += "     Your Google Map's mileage\n";
    }

   if(location=='' )
    {
    missingFields = true;
    strFields += "     Your business name\n";
    }




    if( missingFields ) {
        alert( "I'm sorry, but you must provide the following field(s) before continuing:\n" + strFields );
        return false;
    }
    return true;
}
</script>

score 1 · Accepted Answer · edited May 23 '17 at 10:25

Showing 3 alerts may be disturbing, use something like this:

$(document).on('submit', 'form', function () {
    var empty = $(this).find('input[type=text]').filter(function() {
        return $.trim(this.value) === "";
    });
    if(empty.length) {
        alert('Please fill in all the fields');
        return false;
    }
});

Inspired by this post.

Or you can do validation for each field this way using HTML data attributes:

<form data-alert="You must provide:" action="" method="post">
    <input type="text" id="one" data-alert="Your Google Map's mileage" />
    <input type="text" id="two" data-alert="Your business name" />
    <input type="submit" value="Submit" />
</form>

... combined with jQuery:

$('form').on('submit', function () {
    var thisForm = $(this);
    var thisAlert = thisForm.data('alert');
    var canSubmit = true;
    thisForm.find('input[type=text]').each(function(i) {
        var thisInput = $(this);
        if ( !$.trim(thisInput.val()) ) {
            thisAlert += '\n' + thisInput.data('alert');
            canSubmit = false;
        };
    });
    if( !canSubmit ) {
        alert( thisAlert );
        return false;
    }
});

Take a look at this script in action.

Of course, you can select/check only input elements that have attribute data-alert (which means they are required). Example with mixed input elements.

im looking for a way to specify which field is left blank – Mark Rodriguez Dec 04 '14 at 02:06 — Mark Rodriguez, Dec 04 '14 at 02:06

score 0 · Answer 2 · answered Dec 04 '14 at 01:55

0

You can add the required tag in the input fields. No jQuery needed.

<input required type="text" name="name"/>

answered Dec 04 '14 at 01:55

Josh Lankford

468
2
5

As a tip, you should also use a polyfill for `required`. Something like [h5validate](http://www.html5-tutorials.org/form-validation/polyfills-for-form-validation/) for example. – bvx89 Dec 04 '14 at 01:59

Sergey · Answer 3 · 2014-12-04T02:15:29.893

0

Try this

var fields = ["a", "b", "c"]; // "a" is your "mile"
var empties= [];

for(var i=0; i<fields.length; i++)
{
    if(!$('#'+fields[i]).val().trim())
        empties.push(fields[i]);
}

if(empties.length)
{
    alert('you must enter the following fields '+empties.join(', '));
    return false;
}
else
    return true;

instead of this

var name = $('#mile').val();
if (!name.trim()) {
    alert('you must enter in your mile');
    return false;
}

edited Dec 04 '14 at 02:15

answered Dec 04 '14 at 02:00

Sergey

494
2
6

i need a way to specify which fields are left blank – Mark Rodriguez Dec 04 '14 at 02:05
I am assuming the id of the field is descriptive enough. – Sergey Dec 04 '14 at 02:08
i mean to specify in the alert box which fields are left blank – Mark Rodriguez Dec 04 '14 at 02:10

How to alert user for blank form fields?

3 Answers3