Tuesday, 27 August 2013

Jquery validation for one row out of 5 row

Jquery validation for one row out of 5 row

i have a form with five table row. so i want to validate that whether one
user filled any one row completely.
Here is my code snippet
<div class="full_width_structure">
<table>
<tr>
<td>
<label>Name :</label>
</td>
<td>
<label>Designation :</label>
</td>
<td>
<label>Type :</label>
</td>
<td>
<label>Contact No</label>
</td>
<td>
<label>Address</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="name1" class="required[0]"
rel="Name" />
</td>
<td>
<input type="text" name="designation1" class="required[1]" />
</td>
<td>
<select name="type1">
<option>Rural</option>
<option>Urban</option>
</select>
</td>
<td>
<input type="text" name="contactnum1" class="required[2]
contactno" />
</td>
<td>
<textarea name='address1' class="required[3] textarea
autoHeightTextarea"></textarea>
</td>
</tr>
<tr>
<td>
<input type="text" name="name2" class="" />
</td>
<td>
<input type="text" name="designation2" />
</td>
<td>
<select name="type2">
<option>Rural</option>
<option>Urban</option>
</select>
</td>
<td>
<input type="text" name="contactnum2"
class="validate[required] text-input"
/>
</td>
<td>
<textarea name='address2' class="validate[required]
textarea autoHeightTextarea"></textarea>
</td>
</tr>
<tr>
<td>
<input type="text" name="name3" class="validate[required]
text-input"
/>
</td>
<td>
<input type="text" name="designation3" />
</td>
<td>
<select name="type3">
<option>Rural</option>
<option>Urban</option>
</select>
</td>
<td>
<input type="text" name="contactnum3"
class="validate[required] text-input"
/>
</td>
<td>
<textarea name='address3' class="validate[required]
textarea autoHeightTextarea"></textarea>
</td>
</tr>
<tr>
<td>
<input type="text" name="name4" class="validate[required]
text-input"
/>
</td>
<td>
<input type="text" name="designation4" />
</td>
<td>
<select name="type4">
<option>Rural</option>
<option>Urban</option>
</select>
</td>
<td>
<input type="text" name="contactnum4"
class="validate[required] text-input"
/>
</td>
<td>
<textarea name='address4' class="validate[required]
textarea autoHeightTextarea"></textarea>
</td>
</tr>
<tr>
<td>
<input type="text" name="name5" class="validate[required]
text-input"
/>
</td>
<td>
<input type="text" name="designation5" />
</td>
<td>
<select name="type5">
<option>Rural</option>
<option>Urban</option>
</select>
</td>
<td>
<input type="text" name="contactnum5"
class="validate[required] text-input"
/>
</td>
<td>
<textarea name='address5' class="validate[required]
textarea autoHeightTextarea"></textarea>
</td>
</tr>
</table>
</div>
<!-- full_width_structure -->
so here one row will have name, designation, type , contact number
address. one user can fill maximum of five entries. because only five
static row is exist. so i want to code jquery validation to check whether
one user filled one row completely or not.
if he entered one row completely then submit otherwise return false.
My current validation code
// not working as expected
$('#policestationForm input,#policestationForm
.autoHeightTextarea').each(function () {
var thisObj = $(this);
$(this).focus(function () {
if (noEmptyExists(thisObj)) {
if ($(this).val() === 'This Field Required') {
$(this).val('').removeClass('error_notification');
}
} else {
console.log('no');
}
});
/*
* Blur
*/
$(this).blur(function () {
if (!noEmptyExists(thisObj)) {
$(this).addClass('error_notification').val('This Field
Required');
runHideEffect(thisObj);
} else {
}
});
});
/*
* Submitt form validation
*/
$('#policestationBtn').submit(function () {
$('#policestationForm input,#policestationForm
.autoHeightTextarea').each(function () {
});
});
});
function noEmptyExists(thisObjParam) {
return $(thisObjParam).filter(function () {
return !$.trim(this.value);
}).length === 0;
}
function runHideEffect(thisHideObj) {
setTimeout(function () {
thisHideObj.val('').removeClass('error_notification');
}, 10000);
}

No comments:

Post a Comment