В каком-то смысле это может быть излишним, но я хотел продемонстрировать здесь несколько разных вещей.В первую очередь:
- Обработчики событий пространства имен
- Пользовательская обработка событий
- Запуск обработчиков событий
- Обнаружение и обработка ошибок с массивом ошибок
- Использование атрибутов и
$.data() для хранения данных, связанных с элементами - Использование структурированного объекта для настройки вашей формы
Прочитайте комментарии и дайте мне знать, если у вас естьлюбые вопросы.
Макет HTML
<form id="reg" method="post" action="core/code/functions/signup.php">
<table width="270px" style="clear:both">
<tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">Əsas məlumatlar</td>
</tr>
<tr>
<td><input class="part1 default required" type="text" name="fname" value=""/></td>
<td><input class="part1 default required" type="text" name="mname" value=""/></td>
<td><input class="part1 default" type="text" name="lname" value=""/></td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Password: <input class="part1 default required" type="text" name="pwd"/>
</td>
<tr>
</tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
DOB: <input class="part1 default required" type="text" name="dob"/>
</td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold; color:#333; font-size:13px">
Phone: <input class="part1 default" type="text" name="phone"/>
</td>
</tr>
</table>
<p><input class="button button-gray" type="submit" value="Tamam" name="submit"/></p>
</form>
Javascript
// An object containing different fields by name and
// objects that provide information about the object the
// name points to. 'default' property is required.
var defaultValues = {
'fname': {'default':'Adınız'},
'mname': {'default':'Atanızın adı'},
'lname': {'default':'Soyadınız'},
'phone': {'default':'Telefon'},
'email': {'default':'Email'},
'pwd': {
'default':'Şifrə',
// Text used to display a custom error text.
// Otherwise, the default text will be used.
'errortext':'Password must be 5 characters or more in length',
// A custom function to be called when the element is validated
// and/or checked for default. This is added as a custom event
// handler called 'validation' and called on blur.checkRequired
// and from the function checkRequired() when the
// blur.checkRequired is triggered. The 'notvalidated' data
// element is how the validation failure is passed back to
// blur.checkDefault event.
'onvalidation': function(){
if (this.value.length < 5) {
$(this).data('notvalidated',true);
} else {
$(this).data('notvalidated',false);
}
}
},
'region': {'default':'Rayon'},
'school': {'default':'Məktəb'},
'login': {'default':'Istifadəçi adı'},
'class': {'default':'Sinif'},
'subject': {'default':'Fənnin adını daxil edin'},
'dob': {
'default':'Date of Birth',
// An alternate value to check for, in addition to
// the default. More complex checks should be checked
// through the onvalidation handler.
'validate':' . . ',
'errortext':'A correct Date of Birth must be entered.'
}
};
function checkRequired() {
// We will attach the error list to the body tag.
var $body = $('body');
// This array will store the actual errors, but this specfically
// clears previous errors caught.
$body.data('requiredErrors',[]);
$('input.required').each(function(){
// Trigger is used to manually call the blur.checkRequired
// handler.
$(this).trigger('blur.checkRequired');
});
// Get a reference to the errors generated by the triggered
// event handler.
var errors = $body.data('requiredErrors');
if (errors.length > 0) {
// This will allow you output an error to the user.
var errortext = "There were "+errors.length+" errors "+
"submitting the form.<br/>"+
"These errors must be fixed before submitting the form."+
"<ul>";
for (var i = 0; i < errors.length; i++) {
errortext += "<li>"+errors[i]+"</li>";
}
errortext += '</ul>';
errortext = '<div id="requiredErrorsText">'+errortext+'</div>';
// First try to remove it if it's already showing.
$('#requiredErrorsText').remove();
// At it to the top of the form.
$(errortext).prependTo('form');
// Return false to the submit event handler to prevent the form
// from submitting.
return false;
}
// Return true to allow the form to continue submitting.
return true;
}
$(document).ready(function(){
// Set the initial errors log array.
$('body').data('requiredErrors',[]);
// Loop through and apply the defaultValues object information
// to the related elements.
for (var name in defaultValues) {
// Name is the key object reference and should point to an
// input element with the name attribute equal to it.
var $this = $('input[name="'+name+'"]');
var validate = '';
var errortext = '';
// Only do the apply if their are elements found.
if ($this.length != 0) {
// Add the custom or default value to validate against.
// If both are available, it will check both during the
// blur.checkRequired handler.
if (defaultValues[name].hasOwnProperty('validate')) {
validate = defaultValues[name].validate;
} else {
validate = defaultValues[name].default;
}
// Set the value for the error text to display, defaulting
// to the 'default' value if the property does not exist.
if (defaultValues[name].hasOwnProperty('errortext')) {
errortext = defaultValues[name].errortext;
} else {
errortext = defaultValues[name].default;
}
// Add the validation event handler, if present.
if (typeof defaultValues[name].onvalidation == 'function') {
$this.bind('validation',defaultValues[name].onvalidation);
// Tell the blur.checkRequired() to run the validator handler.
$this.data('usevalidator',true);
} else {
$this.data('usevalidator',false);
}
// Set the default value to the... default value if it is present
// and the element's value is empty. Note, this will allow you to
// not overwrite values returned by a roundtrip to the server
// (in case the submit handler does not prevent the form being
// being submitted.
if ($this.val() == '' && defaultValues[name].default) {
$this.val(defaultValues[name].default);
}
// Set custom attributes for the related values.
$this.attr('default',defaultValues[name].default);
$this.attr('validate',validate);
$this.attr('errortext',errortext);
}
}
$('form').submit(function(){
// NOTE!!! I am return false to prevent the form in jsfiddle
// from submitting the form EVER. This is just for diagnostic
// reasons, it should not done in your production script.
if (checkRequired()) {
alert('Form will submit.');
} else {
alert('Form will NOT submit');
return false;
}
// Remove this when you want to use this for real.
return false;
});
// We will use a cached jQuery object.
$default = $('input[type="text"][default],input[type="text"].required');
// See http://api.jquery.com/bind/ for more on custom events,
// including namespaced events like blur.checkRequired.
$default.live('blur.checkRequired',function(){
var $this = $(this);
var $body = $('body');
var notvalidated = true;
// Having the 'required' class on the input causes it to
// check for validation.
if ($this.hasClass('required')) {
// Triggers the custom validation handler.
if ($this.data('usevalidator') === true) {
$this.trigger('validation');
}
notvalidated = $this.val() == '' ||
$this.val() == $this.attr('default') ||
$this.val() == $this.attr('validate') ||
$this.data('notvalidated') === true;
if (notvalidated) {
$body.data('requiredErrors').push($this.attr('errortext'));
$this.addClass('requiredError');
} else {
$this.removeClass('requiredError');
}
}
});
// Namespaced handlers prepended with a regular handler like
// blur, focus, etc... will be fired with the regular handler.
$default.live('focus.checkDefault', function() {
var el = $(this);
if (el.hasClass('default')) {
el.removeClass('default').val('');
}
if (el.attr('name') === 'dob') {
$(this).mask('99.99.9999', {placeholder:' '});
}
});
$default.live('blur.checkDefault', function() {
var el = $(this);
var name = el.attr('name');
// Really we only want to do anything if the field is *empty*
if (el.val().match(/^[\s\.]*$/)) {
// To get our default style back, we'll re-add the classname
el.addClass('default');
// Unmask the 'dob' field
if (name == 'dob') {
el.unmask();
}
// And finally repopulate the field with its default value
el.val(el.attr('default'));
}
});
});
http://jsfiddle.net/userdude/CMmDF/