Adding *Required next to an empty input

Question

So I was wondering how I could implement required fields into my code. I tried just using required="" in the <input> tag, however, this doesn't work across all browsers. I was wondering if someone could explain how to add "* Required" next to the input if the user tries to submit and the field is empty.

Here's my form code:

contact.html

<form class="contact_form" name="Form" onsubmit="return validateForm()" action="contactform.php" method="post">
    <label>Name *</label><br/>
    <input type="text" name="name" id="noName" placeholder="Full Name"><br/>
    <label>Email *</label><br/>
    <input type="text" name="email" id="a" placeholder="Email"><br/>
    <label>Subject *</label><br/>
    <input type="text" name="subject" id="b" placeholder="Subject"><br/>
    <label>Message *</label><br/>
    <textarea type="text" name="message" id="c" placeholder="Message"></textarea>
    <button type="submit" name="submit" class="submit">Submit</button>
</form> 

formvalidate.js

function validateForm()
{
    var a=document.forms["Form"]["email"].value;
    var b=document.forms["Form"]["subject"].value;
    var c=document.forms["Form"]["message"].value;
    if (a==null || a=="",b==null || b=="",c==null || c=="")
    {
        alert("Please Fill All Required Field");
        return false;
    }
}

var input = document.getElementById('a');

if(input.value.length == 0)
    input.value = "Anonymous";

Answer 1

First of all this is wrong:

if (a==null || a=="",b==null || b=="",c==null || c=="")

Presumably you lifted that from here and as noted in the comments, it doesn't do what it claims and will only check the last field .

To add the message you can modify your validation function to check each field and insert some text. The snippet below should give you a basic idea - and since you're new to javascript I've commented each bit with an explanation. Hope this helps:

 function validateForm() { // start fresh, remove all existing warnings var warnings = document.getElementsByClassName('warning'); while (warnings[0]) { warnings[0].parentNode.removeChild(warnings[0]); } // form is considered valid until we find something wrong var has_empty_field = false; // an array of required fields we want to check var fields = ['email', 'subject', 'message']; var c = fields.length; // iterate over each field for (var i = 0; i < c; i++) { // check if field value is an empty string if (document.forms["Form"][fields[i]].value == '') { // create a div with a 'warning' message and insert it after the field var inputField = document.forms["Form"][fields[i]]; var newNode = document.createElement('div'); newNode.style = "color:red; margin-bottom: 2px"; newNode.className = "warning"; newNode.innerHTML = fields[i] + ' is required!'; inputField.parentNode.insertBefore(newNode, inputField.nextSibling); // form is now invalid has_empty_field = true; } } // do the alert since form is invalid - you might be able to skip this now if (has_empty_field) { alert("Please Fill All Required Field"); return false; } } 

 <form class="contact_form" name="Form" onsubmit="return validateForm()" action="contactform.php" method="post"> <label>Name *</label><br/> <input type="text" name="name" id="noName" placeholder="Full Name"><br/> <label>Email *</label><br/> <input type="text" name="email" id="a" placeholder="Email"><br/> <label>Subject *</label><br/> <input type="text" name="subject" id="b" placeholder="Subject"><br/> <label>Message *</label><br/> <textarea type="text" name="message" id="c" placeholder="Message"></textarea> <button type="submit" name="submit" class="submit">Submit</button> </form> 

And of course you always need server side validation as well! Client side is really only to help get a snappy UIX and can be easily fail or becircumvented by any user who has a mind to do so. Any data you send to the server needs to be checked over and if something's wrong an error should be returned and handled properly on the form page.

Answer 2

The input field becomes a required field when you specify inside the field that it is a required field. Just placing an asterisk * or placing the word required next to it will not make it required.

Here is how to make an input field required in HTML5

Username *: <input type="text" name="usrname" required>

It is the attribute "required" of the element itself that makes it required.

Secondly.. when using the HTML5 validation you will not need javascript validation because the form will not pass the html5 validation. Having both client-side and server-side is important.