Form submitting with empty required fields due to use of "placeholder=" - html

Question

My form is tripping up with required fields are able to be submitted without entering anything in the field. I'd like to use placeholder text but it must be reading this as a value, hence the form goes through?
I'm using the html 5 'placeholder' and 'required attributes. email address does get flagged as the placeholder text doesnt match the format i think.
Is there any way to get the form to flag the other required fields?
<form action="FormToEmail.php" method="POST" name="Competition">
<div id="text">
<input class="field" value="" type="text" name="Name" required placeholder="FULL NAME*">
<input class="field" value="" type="email" name="Email" required placeholder="EMAIL ADDRESS*">
<input class="field" value="" type="text" name="Contact-number" required placeholder="CONTACT NUMBER*">
<input class="field" value="" type="text" name="Code" required placeholder="UNIQUE CODE*">
<p>I have read the Terms and Conditions</p><input type="checkbox" name="Terms and Conditions" value="Selected" required></div>
<p >Read the Terms and Conditions.</p>
<p>* required field</p>
<input class="btn btn-draw" type="submit" name="submit" value="Submit!" />
</form>
EDIT: i recall now that i'm using the javascript below to show the placeholder text in older versions of internet explorer. This script does work for that with the knock on effect of the empty fields submitting.
I am probably best covered to leave it like this, but i'd be interested if there is any comprehensive solution to ensure placeholder text shows in older browsers and the empty fields are flagged.
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

Answer 1

Ok, you need to prevent the form submit if the input val is equal the placeholder:
}).blur().parents('form').submit(function(event) {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
event.preventDefault();
input.val('');
}
Are you using any plugin? In which browser is the problem?
The test don't show any problems.
https://jsfiddle.net/mcymnayz/
<form action="FormToEmail.php" method="POST" name="Competition">
<div id="text">
<input class="field" value="" type="text" name="Name" required placeholder="FULL NAME*">
<input class="field" value="" type="email" name="Email" required placeholder="EMAIL ADDRESS*">
<input class="field" value="" type="text" name="Contact-number" required placeholder="CONTACT NUMBER*">
<input class="field" value="" type="text" name="Code" required placeholder="UNIQUE CODE*">
<p>I have read the Terms and Conditions</p><input type="checkbox" name="Terms and Conditions" value="Selected" required>
</div>
<p >Read the Terms and Conditions.</p>
<p>* required field</p>
<input class="btn btn-draw" type="submit" name="submit" value="Submit!" />
</form>