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

Question

I am 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?
Thanks!
<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 1

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.

Answer 2

Try W3Schools example of
http://www.w3schools.com/tags/att_input_required.asp
<input class="form-control input-lg" name="firstname" placeholder="First Name" required >
with no equals or anything
I thought the required tag was
required="True/false"

Answer 3

A simple solution would be something like this.
You can do this by using JQuery
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var name = $.trim($('#log').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty. You cannot leave is blank!');
return false;
}
});
.text-label {
color: #cdcdcd;
font-weight: bold;
}
#pwd{
margin:10px 18px;
}
#logBtn{
margin:10px 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="login.php" method="post">
<label>Login Name:</label>
<input type="text" name="email" id="log" />
<br/>
<label>Password:</label>
<input type="password" name="password" id="pwd" />
<br/>
<input type="submit" id="logBtn" name="submit" value="Login" />
</form>