Klientsidevalidering med bacon.js og ASP.NET MVC – Kombinér hipt og kult med traust og solid – In comes bacon.js

View Github Repository Open presentation in a new window

magnuf

See all presentation from magnuf

Klientsidevalidering med bacon.js og ASP.NET MVC – Kombinér hipt og kult med traust og solid – In comes bacon.js

0 0

FRP-.NET-MVC

On Github magnuf / FRP-.NET-MVC

Klientsidevalidering med bacon.js og ASP.NET MVC

Kombinér hipt og kult med traust og solid

BEKK Trondheim minikonferanse 6/12/13

Magnus Sellereite Fjell

Modellen din

public string Navn { get; set; }
[Required(ErrorMessage = "Adresse mangler")]
public string Adresse { get; set; }
[Required(ErrorMessage = "Postnummer mangler")]
[RegularExpression("^\\d{4}$",
 ErrorMessage = "Sikker på at dette er rett postnummer?")]
public string Postnummer { get; set; }
[Required(ErrorMessage = "Poststed mangler")]
[RegularExpression("^[A-Za-zÆØÅæøå\\s]+$",
 ErrorMessage = "Tror det er noe feil med poststedet du har oppgitt")]
public string Poststed { get; set; }

HTMLen

<input id="Navn">
<input id="Adresse" data-val-required="Adresse mangler">
<input id="Postnummer"
data-val-regex="Sikker på at dette er rett postnummer?"
data-val-regex-pattern="^\d{4}$" data-val-required="Postnummer mangler">
<input id="Poststed"
data-val-regex="Tror det er noe feil med poststedet du har oppgitt"
data-val-regex-pattern="^[A-Za-zÆØÅæøå\s]+$" data-val-required="Poststed mangler">

In comes bacon.js

Hent ut informasjonen

var requiredText = input.attr("data-val-required");
var regex = input.attr("data-val-regex-pattern");
var regexText = input.attr("data-val-regex");

Valideringsfunksjoner

Required

function(value) {
    if(requiredText){
        return !!value
    }
    return true;
}

Regex

function(value) {
    if(!value) return true;
    if(!pattern) return true;
    return new RegExp(pattern, "i").test(value);
};

Sett opp validering

var property = DoBaconMagic(input);
var boolvalid = property.map(requiredFunc);
var regexvalid = property.map(regexFunc(regex));
boolvalid.assign($("#"+input[0].id + "_feil_required"), "toggleClass", "skjult");
boolvalid.not().or(regexvalid)
.assign($("#"+input[0].id + "_feil_regex"), "toggleClass", "skjult");
validFunksjoner.push(boolvalid);
validFunksjoner.push(regexvalid);
var allValid = settSammenValidates(validFuncs);
allValid.not().assign($("input[type=submit]"), "attr", "disabled");

Eksempel

Navn Adresse Postnummer Poststed Slå på validering

Custom attribute

[OldEnough(ErrorMessage = "Innflytter må være minst 16 år gammel")]
public DateTime InnflytterFodselsdato { get; set; }

                        
var d = Convert.ToDateTime(value);
return d <= MaxDate;

                        

                        
var rule  = new ModelClientValidationRule
    {
        ValidationType = "oldenough",
        ErrorMessage = ErrorMessage
    };
rule.ValidationParameters["maxdate"] = MaxDate.TilNorskDato();

                        

                        
function(value) {
    if(!value) return true;
    if(!maksdato) return true;
    f(!moment(value, "DD-MM-YYYY").isValid()) return true;
    return moment(maksdato, "DD-MM-YYYY").isAfter(moment(value));
};

                    

                
Fødselsdato
                    Slå på validering