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";

Hi Terry - did you read any of the answers here? Was anything helpful? If so, you can mark an answer as "Accepted" or leave a comment if you need clarification. — But those new buttons though.., Oct 20 '18 at 03:53

But those new buttons though.. · Answer 1 · 2018-10-12T16:59:34.923

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.

score -1 · Answer 2 · answered Oct 12 '18 at 16:32

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.

Adding *Required next to an empty input

2 Answers2