私は5つのテーブル行を持つフォームを持っています。そのため、1 人のユーザーが 1 つの行を完全に埋めたかどうかを検証したいと思います。
ここに私のコードスニペットがあります
<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 -->
したがって、ここの1行には、名前、指定、タイプ、連絡先番号の住所があります。1 人のユーザーが最大 5 つのエントリを入力できます。静的行が 5 つしかないためです。そのため、jquery 検証をコーディングして、1 人のユーザーが 1 つの行を完全に埋めたかどうかを確認したいと考えています。
彼が 1 つの行を完全に入力した場合は送信し、それ以外の場合は false を返します。
現在の検証コード
// 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);
}