Page 60 - JavaScript修炼之道

任务21 表单验证：基本技巧 49

必填输入项的HTML代码

form/validation101/index_for_book.html

<form id="registration">
<p>
<label for="user_first_name">First name*</label>
<input type="text" name="user[first_name]" id="user_first_name"
class="required text" />
</p>
<!-- ……更多输入域…… -->
<p class="radios">
<input type="checkbox" id="terms" name="terms" class="required" />
<label for="terms">I accept the terms of service* </label>
</p>
<p><input type="submit" value="Sign me up!" /></p>
</form>

检测未填的必填项

form/validation101/validation101.js

function checkForm(e) {
var firstOffender, value;
this.select('.required').each(function(field) {
value = field.getValue();
if (value && !value.blank()) {
field.up('p').removeClassName('missing');
} else {
firstOffender = firstOffender || field;
field.up('p').addClassName('missing');
}
});
if (firstOffender) { e.stop(); firstOffender.focus(); }
}

document.observe('dom:loaded', function() {
$('registration').observe('submit', checkForm);
});

相关任务

 任务22
 任务23