HTML Validation

Question

I'm trying to validate every input in my HTML Form. But at the same time, I want to make the textbox borders appear red, when a user didn't input anything or didn't meet the format, requirement input in my form. Any tips on how to do `

     <body background='bgimg.jpg'>
     <form id='forma'align='center'>
        <fieldset class='fieldset-auto-width'>


        <div>
            <label for='fname'><b>FirstName:</b></label>
            <input type='text' value='' name='fname' placeholder='Enter First Name' required='required' pattern='[a-z]'/>
            </div>

        <div>
            <label for='lname'><b>LastName:</b></label>
            <input type='text' value='' name='lname'placeholder='Enter Last Name' required='required'/>
        </div>

        <div>
            <label for='pass'><b>Password:</b></label>
            <input type='password' value'' name='pass' placeholder='Enter Password' required='required'/>
        </div>  

        <div>
            <label for='eAdd'><b>Email Address:</b></label>
            <input type='text' value='' name='eAdd' placeholder='e.g: [email protected]' required='required'/> 
        </div>

        <div>
            <label for='hAdd'><b>Home Address:</b></label>
            <input type='text' value='' name='hAdd' size:'30' placeholder='Enter Current Home Address' required='required'/>
        </div>

        <div>
            <label for='gender'><b>Gender:</b></label>
            <input type='radio' value='Male' name='gender' required='required' />Male
            <input type='radio' value='Female' name='gender'/> Female
        </div>

        <div>
            <label for='status'><b>Status:</b></label>
            <input type='radio' value='Single' name='status' required='required'/> Single
            <input type='radio' value='Married' name='status'/> Married 
            <input type='radio' value='Widow' name='status'/> Widow
        </div>

        <div>
            <label for='dob'><b>Date of Birth:</b></label>
            <input type='date' value='' name='dob'placeholder='MM/DD/YY' required='required'/> 
        </div>

        <div>
            <label for='bansa'><b>Country:</b></label>
            <select  name='country' >
                <option value='AR'>Aruba</option>
                <option value='BR'>Brazil</option>
                <option value='CH'>Chad</option>
                <option value='DN'>Denmark</option>
                <option value='EN'>England</option>
            </select>   
        </div>
        </br>
        </br>
        <div>
            <center><b>Siblings</b></center>
            <table  border='1' align='center' bgcolor='#C5E3BF'>
                <tr>
                    <td>Name</td>
                    <td>Age</td>
                    <td>Gender</td>
                </tr>

                <tr>
                    <td><input type='text' value='' name='name' /></td>
                    <td><input type='text' value='' name='age' size='3'/></td>                  
                    <td><input type='text' value='' name='sGender' size='8'/></td>
                </tr>

                <tr>
                    <td><input type='text' value='' name='name'/></td>
                    <td><input type='text' value='' name='age' size='3'/></td>                  
                    <td><input type='text' value='' name='sGender' size='8'/></td>
                </tr>

                <tr>
                    <td><input type='text' value='' name='name'/></td>
                    <td><input type='text' value='' name='age' size='3'/></td>                  
                    <td><input type='text' value='' name='sGender'size='8'/></td>
                </tr>   
            </table>
        </div>
            </br>

        <div>
            <b><Center>Educations</center></b>
            <table border='1' bgcolor='#C5E3BF'>
                <center><tr>
                    <td>School Name</td>
                    <td>Year Graduated</td>
                    <td>Honor Received</td>
                </tr></center>

                <tr>
                    <td><input type='text' value='' name='sName'/></td>
                <td>
                    <center><select name='country'>
                <option value='2001'>2001</option>
                <option value='2002'>2002</option>
                <option value='2003'>2003</option>
                <option value='2004'>2004</option>
                <option value='2005'>2005</option>
                    </select>
                </td>
                <td><input type='text' value='' name='hnrReceived'/></td>
                </tr></center>

                <tr>
                    <td><input type='text' value='' name='sName'/></td>
                <td>
                    <center><select name='country'>
                <option value='2001'>2001</option>
                <option value='2002'>2002</option>
                <option value='2003'>2003</option>
                <option value='2004'>2004</option>
                <option value='2005'>2005</option>
                    </select></center>
                </td>
                <td><input type='text' value='' name='hnrReceived'/></td>
                </tr>

                <tr>
                    <td><input type='text' value='' name='sName'/></td>
                <td>
                    <center><select name='country'>
                <option value='2001'>2001</option>
                <option value='2002'>2002</option>
                <option value='2003'>2003</option>
                <option value='2004'>2004</option>
                <option value='2005'>2005</option>
                    </select></center>
                </td>
                <td><input type='text' value='' name='hnrReceived'/></td>
                </tr>   
            </table>        
        </div>

        <div>
        <label for='abtyrslf'><b>About Yourself:</b></label>
    </br>
        <textarea cols='50' rows='10' placeholder='Tell us something about yourself.'></textarea>
        </div>

        <input type='submit' value='Submit'/>
        <input type='reset' value='Reset'/>

            </br>
            </br>
            </br>
        <div>
                <center><img src='gwaponess.jpg' id='pogi' height="190" width="190"/></center>
        </div>
        </fieldset>
    </form> 
<hr/>
<center><h3><h3></center>
<hr/>
</body>

Some browsers do this automatically for you. Firefox certainly does. — Scanner
– Scanner, Commented Dec 3, 2015 at 9:24

Lal · Accepted Answer · 2015-12-03 08:57:44Z

2

See this fiddle

You can use :invalid pseudo CSS class

CSS

input:invalid {
  border-color: red;
}
input:valid {
  background-color: #ddffdd;
}

According to the docs

The :invalid CSS pseudo-class is applied automatically to elements whose contents fail to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.

answered Dec 3, 2015 at 8:57

Lal

14.9k4 gold badges50 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

juju17 Over a year ago

Question, when I put that on my CSS code, upon opening of my html, the border automatically turns red. How do I solve that? The border should turn red only when I hit the submit button and there is an invalid data.

Lal Over a year ago

Please see the asnwer here @user4932301

rjps12 · Accepted Answer · 2015-12-03 09:53:24Z

0

You can use jquery validation for that...

  $('#forma').validate({
      rules : {
           fname: { required: true },
           lname: { required: true },
           eAdd: { requried: true },
           pass: { required: true }
           // and so on......
      }
   });

Just add reference for jquery lib and validation..

answered Dec 3, 2015 at 9:53

rjps12

6057 silver badges15 bronze badges

Collectives™ on Stack Overflow

HTML Validation

2 Answers 2

See this fiddle

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

See this fiddle

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related