הווה ועתיד
כרגע הולידציה שלנו עובדת בצורה טובה, אך ישנה בעיה אסטטית קטנה. כדי לוודא שהשדה תקין או לא אנחנו חייבים למלא את הטופס ולשלוח אותו לשרת ולאחר ריענון המערכת מציגה את ההודעה.
אנחנו כמובן נרצה לשפר את זה, אנחנו רוצים להציג את ההודעה ברגע שהמשתמש סיים להקיש את הערך שלו (משתמשים מפונקים הללו)!
Unobtrusive Client Validation
מקירוסופט השיקה את הולידציה עוד ב MVC2, אך ב MVC3 היא שיפרה אותה. הולידציה נוצרת בהרצה של האפליקציה שלנו מאפשרת, בעזרת JQuery, לעשות בדיקות שונות בצד הלקוח.
למי שעדיין לא קרא את המאמר הזה:
http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
תקראו :)
שיפורים קלים בצד השרת
זוכרים את ה Interface של GetClientValidationRules? לא?
בעזרת Interface הנ”ל אנחנו נעביר את הוולידציה של צד השרת לצד הלקוח:
#region IClientValidatable Members
public IEnumerable<ModelClientValidationRule> GetClientValidationRules( ModelMetadata metadata , ControllerContext context )
{
string _dependentProperty = GetdDependentPropertyId( metadata , context as ViewContext );
this._DependentPropertyDisplayName = _dependentProperty;
var rule = new ModelClientValidationRule()
{
ErrorMessage = FormatErrorMessage( metadata.GetDisplayName() ) ,
ValidationType = "agecompare"
};
rule.ValidationParameters.Add( "dependentproperty" , _dependentProperty );
yield return rule;
}
#endregion
private string GetdDependentPropertyId( ModelMetadata metadata , ViewContext viewContext )
{
// Get element id from our template
string _dependentProperty = viewContext.ViewData.TemplateInfo.GetFullHtmlFieldId( this.DependentProperty );
//remote field name from Dependent Property
var thisField = metadata.PropertyName + "_";
if ( _dependentProperty.StartsWith( thisField ) )
_dependentProperty = _dependentProperty.Substring( thisField.Length );
return _dependentProperty;
}
המטודה GetdDependentPropertyId מאפשר לנו להוציא את ה ID של האלמנט התלוי (שדה “גיל האב” במקרה שלנו)
var rule = new ModelClientValidationRule()
{
ErrorMessage = FormatErrorMessage( metadata.GetDisplayName() ) ,
ValidationType = "agecompare"
};
rule.ValidationParameters.Add( "dependentproperty" , _dependentProperty );
yield return rule;
כאן חשפנו את ההגדרות לצד הלקוח.
באו נראה מה מיוצר ב HTML:

כפי שאתם רואים, השדה שלנו כולל את כל ההגדרות של הוולידציה שלנו עם prefix
data-val-agecompare-
To The JavaScript!!!
קודם כל עלינו לרשום את הוולידציה ב unobtrusive validation:
$.validator.unobtrusive.adapters.add(
'agecompare',
['dependentproperty'],
function (options) {
options.rules['agecompare'] = {
dependentproperty: options.params['dependentproperty']
};
options.messages['agecompare'] = options.message;
});
תשימוש לב שכל השמות חייבים להיות באותיות קטנות
כפי שניתן לראות אנחנו מעבירים במערך את כל ההגדרות שלנו ('dependentproperty')
לאחר שרשמו את הוולידציה, הגיע השלב הסופי: לבנות את הולידטור שלנו
$.validator.addMethod('agecompare',
function (value, element, parameters) {
var id = '#' + parameters['dependentproperty'];
var _dependentvalue = $(id).val();
var _value = $(element).val();
if ((_dependentvalue - _value) < 15)
return false;
return true;
}
);
תשימו לב שהתנאי הוא זהה למה שכתבו בצד השרת
כל הקוד נראה כך:
$.validator.addMethod('agecompare',
function (value, element, parameters) {
var id = '#' + parameters['dependentproperty'];
var _dependentvalue = $(id).val();
var _value = $(element).val();
if ((_dependentvalue - _value) < 15)
return false;
return true;
}
);
$.validator.unobtrusive.adapters.add(
'agecompare',
['dependentproperty'],
function (options) {
options.rules['agecompare'] = {
dependentproperty: options.params['dependentproperty']
};
options.messages['agecompare'] = options.message;
});
עכשיו כשנריץ את האפליקציה, אנחנו נראה ברגע שממלאים את הגיל הוולידטור מופעל :)
אתם יכולים להוריד את כל האפליקציה הגמורה מפה:
בהצלחה!!!