juju17
Reputation: 269
HTML Validation
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>
Upvotes: 2
Views: 112
Answers (2)
rjps12
Reputation: 605
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..
Upvotes: 0
Lal
Reputation: 14810
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.
Upvotes: 2