alx.p alx.p - 2 months ago 19
HTML Question

How can I prevent blank HTML form submissions to go through?

I'm using Formspree (which is awesome) except: I have set all my fields to required, when I try manually I can't submit a form without filling everything properly, and however I still get a bunch of blank forms coming through. Has anybody experienced / fixed this before?

Thx

<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">

<input class="form-control input-lg" name="firstname" placeholder="First Name" required type="text">

<input class="form-control input-lg" name="lastname" placeholder="Last name" required type="text">

<input class="form-control input-lg" name="phone" placeholder="Phone number" required type="text">

<select required name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>

<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />

<button id="demo" type="submit">GO</button>

Answer

And this is another Solution for your code, as this will work even if somebody put "spaces or leave it with blank" in the field of Name or Phone.

Check the Fiddle..

//  Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {

    // Get the Login Name value and trim it
    var fname = $.trim($('#fname').val());
    var lname = $.trim($('#lname').val());
    var phon =$.trim($('#phon').val());

    // Check if empty of not
    if (fname === '') {
        alert('First name is empty.');
        return false;
    }
    else if (lname === '') {
        alert('Last Name is empty.');
        return false;
    }
    else if (phon === '') {
        alert('Phone is empty.');
        return false;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">

<input class="form-control input-lg" name="firstname" placeholder="First Name" id="fname" required type="text">

<input class="form-control input-lg" name="lastname" placeholder="Last name" id="lname" required type="text">

<input class="form-control input-lg" name="phone" placeholder="Phone number" id="phon" required type="text">

<select name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
    <option value="" disabled selected>Please select your country </option>
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="other">Not in the List</option>
    <!-- etc -->
</select>

<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />

<button id="demo" type="submit">GO</button>

If somebody type space to the input box then this Jquery code will work and ask him to fill proper text in fields.

Comments