47-解决方案

10.11.2　解决方案

解决方案的第一部分相当简单。找到 <form> 元素，拦截 submit 事件。当提交表单时，循环读取必要的表单元素，检查必要的元素是否有效。如果表单没有错误，则（也仅在这种情况下）触发 submit 事件：

$('form').submit(function(event){
　　 var isErrorFree = true;
　　 //循环读取必要的表单元素,检查它们是否有效
　　 $('input.required, select.required, textarea.required',this).each(function(){
　　　　　if ( validateElement.isValid(this) == false ){
　　　　　　　 isErrorFree = false;
　　　　　};
　　 });
　　 // Ajax替代方案:
　　 // event.preventDefault();
　　 // if (isErrorFree){ $.get( url, data, callback, type ) }
　　 // if (isErrorFree){ $.post( url, data, callback, type ) }
　　 // if (isErrorFree){ $.ajax( options ) }
　　 return isErrorFree;
}); //结束 .submit()

解决方案的第二部分是真正发生验证的地方。 isValid() 方法开始时存储打算验证的常用数据。然后，在 switch() 语句中验证元素。最后，在 <label> 和 div.errorMessage 元素中添加或者删除类名。

var validateElement = {
　　 isValid:function(element){
　　　　　var isValid = true;
　　　　　var $element = $(element);
　　　　　var id = $element.attr('id');
　　　　　var name = $element.attr('name');
　　　　　var value = $element.val();
　　　　　// <input>使用在标签中写入的type属性
　　　　　// <textarea>固有的类型为"textarea"
　　　　　// <select>固有的类型为"select-one"或"select-multiple"
　　　　　var type = $element[0].type.toLowerCase();
　　　　　switch(type){
　　　　　　　 case 'text':
　　　　　　　 case 'textarea':
　　　　　　　 case 'password':
　　　　　　　　　　if ( value.length == 0 ||
value.replace(/\s/g,'').length == 0 ){ isValid = false; }
　　　　　　　　　　break;
　　　　　　　 case 'select-one':
　　　　　　　 case 'select-multiple':
　　　　　　　　　　if( !value ){ isValid = false; }
　　　　　　　　　　break;
　　　　　　　 case 'checkbox':
　　　　　　　 case 'radio':
　　　　　　　　　　if( $('input[name="' + name +
'"]:checked').length == 0 ){ isValid = false; };
　　　　　　　　　　break;
　　　　　} // 结束switch()
　　　　　//将使用$(selector)[method]代替$(selector).method
　　　　　//明智地选择正确的方法
　　　　　var method = isValid ? 'removeClass' : 'addClass';
　　　　　// 显示错误消息[addClass]
　　　　　// 隐藏错误消息[removeClass]
　　　　　$('#errorMessage_' + name)[method]('showErrorMessage');
　　　　　$('label[for="' + id + '"]')[method]('error');
　　　　　return isValid;
　　 } // 结束validateElement.isValid()
}; // 结束validateElement object