CODEWITHSUNDEEP
javascripthtmlcss
mrina
mrina

Reputation: 33

I want to validate a form field using a red border when field is empty or wrong field is entered

I want to validate this form using red border when the field is empty or if the user entered the wrong field.

I'd also like to disable the submit button when fields are invalid.

Note that there are other fields that are not mandatory like MOBILE and EMAIL (they can be submitted later in "edit user details"). Although if the wrong email is entered, I'd like to validate it also.

<form  action="" method="POST">
    <input type="date" name="date" placeholder="Registration Date" /></br>
    <input name="full_names" type="text" placeholder="Full names" /></br>
    <input name="mobile" type="text" placeholder="Mobile" /></br>
    <span>Select status </span>
    <select name="status">                                                            
        <option value="Paid">Paid</option>
        <option value="Unpaid">Unpaid</option>
    </select></br>

    <span>Select Chapter </span>
    <select name="chapter">                                                           
        <option value="Known">Known</option>
        <option value="Unknown">Unknown</option>
    </select></br>

    <span>Select Gender </span>
    <select name="gender">                                                            
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select></br>

    <input type="text" name="email" placeholder="Email Address" /></br>

    <textarea type="text" placeholder="Any Remarks" rows="2" name="remarks"></textarea></br>

    <button type="submit">Submit </button> 

</form>

Upvotes: 1

Views: 5160

Answers (1)

allicarn
allicarn

Reputation: 2919

HTML5 has a lot of this built in, with required attributes and the ability to provide a regex pattern attribute to validate against. Some is even built in, like when you use type="email" attribute instead of type="text".

Using HTML5 validation + CSS3, you can pick up on the :invalid state and apply styles to the elements in that state.

Although this does not apply the disabled state to the submit button, it does not submit the form if validation fails.

input,
textarea {
  margin: 5px 0;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input:invalid,
select:invalid,
textarea:invalid {
  border-color: red;
}
<form action="" method="POST">
  <input type="date" name="date" placeholder="Registration Date" required />
  <br/>
  <input name="full_names" type="text" placeholder="Full names" required />
  <br/>
  <input name="mobile" type="tel" pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' placeholder="Mobile" title="+99(99)9999-9999" />
  <!-- Pattern from: http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-email-url-and-telephone-input-types.html#fbid=UQp7PiVwsX2 -->
  <br/>
  <span>Select status </span>
  <select name="status" required>
    <option value="Paid">Paid</option>
    <option value="Unpaid">Unpaid</option>
  </select>
  <br/>

  <span>Select Chapter </span>
  <select name="chapter" required>
    <option value="Known">Known</option>
    <option value="Unknown">Unknown</option>
  </select>
  <br/>

  <span>Select Gender </span>
  <select name="gender" required>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <br/>

  <input type="email" name="email" placeholder="Email Address" />
  <br/>

  <textarea type="text" placeholder="Any Remarks" rows="2" name="remarks" required></textarea>
  <br/>

  <button type="submit">Submit</button>

</form>

Upvotes: 2

Related Questions