Ett par frågor.... Har du kikat på: Jo, jag har gjort en titt på de, men som sagt "de säger inte mig så mycket".... Jaha, det här var något nytt för mig... Får försöka att inte bli sittande och läsa om behaviors hela natten. Här är i alla fall specifikationen: http://www.w3.org/TR/becss Ganska basic grejor om du tittar på koden, dom har 2 st htc apps som tar hand om events på sidan. Tja, jag kan ju gå igenom lite grand i alla fall...Bostream-"css".....
Ett....
I Bostreams anmälningsformulär, (med namn, adress etc), så använder de en "smart" lösning av css tillsammans med formulärkontroll.....
Tittar i "källan" men det säger inte mig så mycket....
Alltså; om jag skriver in ett telefonnummer, personnummer, postnummer felaktigt så rödmarkeras en ram runt input-fältet DIREKT.....
Dock fattar jag inte hur det går tillväga... Någon som kan förklara (visa mer kod som behövs).... eller har en annan liknande bra (bättre) lösning.
Två....
När man för musen över fältet som är felinmatat (rödmarkerat) så får man även en "alt-text" med felmeddelandet....
Räcker det med "errorMsg" i input-fältet för det skall funka (inget annat JavaScript eller så) ?
Tre....
Sedan menyn (till vänster) som Bostream använder..
När man för musen över t.ex. priser, produkter etc. så blir det en gråtonad bakgrund med en tunn svart ram runt.....
Kan inte se hur denna CSS-kod ser ut... Någon som vet ?
// MikkeSv: Bostream-"css".....
http://www.bostream.com/skins/default.css
http://www.bostream.com/skins/msie/main.cssSv: Bostream-"css".....
Lite mer förklaring vore önskvärt ;-)
(något med *behaviors* verkar det vara,,,, har jag inte så stor koll på...
eller om det finns något liknande sätt att lösa det på.....)
// MSv: Bostream-"css".....
Sv: Bostream-"css".....
Ex: isValid() som kollar om fältet du onBlur:ar från är ok eller inte.
osv....
Här är koden för hela deras htc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<?xml version="1.0" encoding="ISO-8859-1"?>
<public:component urn="MKDragLayer">
<public:attach event="ondocumentready" handler="init" />
<public:attach event="onchange" handler="doChange" />
<public:attach event="onfocus" handler="doFocus" />
<public:attach event="onblur" handler="doBlur" />
<public:method name="validateDate"/>
<public:method name="validateDate"/>
<public:method name="doFocus"/>
<public:method name="validateEmail"/>
<public:method name="isValid"/>
<public:method name="isEmpty"/>
<public:method name="matches"/>
<script language="JSCRIPT">
// Copyright (c) Existic AB, www.existic.com. May not be used for commercial solutions without expressed permission
function doFocus()
{
if (this.format && this.value == this.format)
this.value =""
}
function doBlur()
{
if (this.isEmpty() && this.format)
this.value = this.format;
this.isValid();
}
function doChange()
{
this.isValid();
}
function isValid()
{
var bool = true;
if (this.compare)
{
bool = this.matches(this.compare);
}
else if (this.required == "1")
{
if(this.isEmpty())
{
bool = false;
this.title ="fältet måste fyllas i";
}
}
if (bool)
{
if(this.datatype == "date")
{
bool = this.validateDate();
if(!bool) this.title = "felaktigt datum, ska vara i formatet yyyy-mm-dd";
}
else if(this.datatype == "personnr" )
{
if (this.required == "1" && this.value == this.format)
{
bool = false;
}
else
{
bool = this.validatePersNr(this.value);
if(!bool) this.title = "Felaktigt personnr";
}
}
else if(this.datatype == "time")
{
bool = this.validateTime();
if(!bool) this.title = "felaktig tid, ska var i formatet hh:mm";
}
else if(this.datatype == "email" && !this.isEmpty())
{
bool = this.validateEmail();
if(!bool) this.title = "felaktig mailadress";
}
else if(this.expression && this.value != "")
{
var re = new RegExp(this.expression,"ig");
bool = re.test(this.value);
if(!bool) this.title = this.errorMsg;
}
}
if ((this.value == this.format) && this.required != "1")
bool = true;
bool ? hideMarker() : showMarker();
if (bool) this.title = "korrekt ifyllt";
return bool;
}
function showMarker()
{
//this.style.backgroundColor ="pink";
this.style.borderColor ="#E9181E";
}
function hideMarker()
{
//this.style.backgroundColor ="white";
this.style.borderColor ="#c6c6c6";
}
function isEmpty()
{
var re= /\S/;
bool = re.test(this.value);
return !bool;
}
function matches(id)
{
var bool = false;
var otherElement = window.document.all[id];
if (otherElement)
{
if (otherElement.value == this.value) bool = true;
}
if (!bool) this.title = this.errorMsg;
return bool;
}
function validateEmail()
{
var re= /^[^\x0d]+\@([-A-Za-z0-9]+\.)+[A-Za-z]{2,4}$/;
bool = re.test(this.value);
return bool;
}
function validateDate()
{
var re= /^(\d{4})\-(\d{2})\-(\d{2})$/ig;
bool = re.test(this.value);
var year = parseInt(RegExp.$1,10 );
var month = parseInt(RegExp.$2,10);
var date = parseInt(RegExp.$3,10);
if (year > 2200 || year < 1900)
bool = false;
if (month > 12 || month < 1)
{
bool = false;
}
return bool;
}
function validatePersNr(strNumber)
{
var result = true;
if (strNumber.length != 11)
{
result = false;
}
else {
var arrNumbers = strNumber.match(/^(\d)(\d)(\d)(\d)(\d)(\d)-(\d)(\d)(\d)(\d)$/);
var nCheckSum = 0;
if (arrNumbers == null)
{
//bool = false;
return false;
}
for (var nCnt = 1; nCnt <= 9; nCnt++)
{
var nTemp = arrNumbers[nCnt] * (nCnt % 2 ? 2 : 1);
nCheckSum += nTemp >= 10 ? 1 + nTemp % 10 : nTemp;
}
nCheckSum = (10 - (nCheckSum % 10)) % 10;
if(nCheckSum != arrNumbers[10])
result = false;
}
return result;
}
function validateTime()
{
var re= /^(\d{2})\:(\d{2})$/ig;
bool = re.test(this.value);
var firstpart = parseInt(RegExp.$1);
var lastpart = parseInt(RegExp.$2);
if (firstpart > 23 || firstpart < 0)
bool = false;
if (lastpart > 59 || lastpart < 0)
{
bool = false;
}
return bool;
}
function init()
{
this.validating = true;
if (!this.id) this.id = window.document.uniqueID;
var tagID = this.id+"_error";
var tagStr = "<span style='color:red;font-weight:bold' id='"+tagID+"'></span>";
window.document.all[this.id].insertAdjacentHTML("AfterEND",tagStr);
this.errorLabel = window.document.all[tagID];
if(this.datatype == "date")
{
this.maxLength = "10"
}
else if(this.datatype == "time")
{
this.maxLength = "5"
}
if (this.format && !this.value)
this.value=this.format;
}
</script>
</public:component>
Nästa htc
<public:component urn="MKDragLayer">
<public:attach event="ondocumentready" handler="init" />
<public:attach event="onsubmit" handler="doSubmit" />
<public:method name="isValid"/>
<script language="JSCRIPT">
// Copyright (c) Existic AB, www.existic.com. May not be used for commercial solutions without expressed permission
function doSubmit()
{
if (!this.isValid())
{
event.returnValue = false;
alert("Ett eller flera fält (rödmarkerade) är inte korrekt ifyllda. Om du vilar muspekaren över respektive fält får du mer information.");
}
else
{
for (var i=0;i< this.elements.length;i++)
{
var formElement = this.elements[i];
if(formElement.format == formElement.value)
formElement.value = "";
}
}
}
function isValid()
{
var formValid = true;
for (var i=0;i< this.elements.length;i++)
{
var formElement = this.elements[i];
if (formElement.validating && !formElement.isValid() ) formValid = false;
}
return formValid;
}
function init()
{
}
</script>
</public:component>Sv: Bostream-"css".....
"Ganska basic grejor om du tittar på koden,"....
.... Hum, jo kanske för den inbitne kodaren....
Men som jag skrev (ganska tydligt tycker jag) att jag inte fattade så mycket av den, utan önskade lite mer förklaring.....
Visst det går väl att rippa koden rakt av, men då lär man ju sig inget på det.
Så copland, du får gärna förklara mer ;-)
ha det !
/// MikkeSv: Bostream-"css".....
ta isValid funkionen...
Om du tittar i källkoden för den webbsidan så ser du att alla element som ska fyllas i har ett attribut: required=1....
Det är ett av de värden som kontorlerras varje gång det sker en onChange för formuläret <form...>
Därefter kollar dom på bostream bara om du fyllt i något eller om fältet är tomt.
Efter några övriga kontroller så kommer du till slutet på koden.
bool ? hideMarker() : showMarker();
if (bool) this.title = "korrekt ifyllt";
return bool;
}
function showMarker()
{
//this.style.backgroundColor ="pink";
this.style.borderColor ="#E9181E";
}
function hideMarker()
{
//this.style.backgroundColor ="white";
this.style.borderColor ="#c6c6c6";
}
Där kontrolleras det om bool är true eller false... och därefter så har du två andra funktioner show resp hideMarker som ändrar attribut för det element som kontrollen sker på, tex fältet förnamn...
För att du ska använda en sådan här kontroll behöver du inte krångla till det i onödan.
Gör en basic funktion för att testa som bara kontrollerar ett av dina element i formuläret och anropar en funtion du har på din sida.
Skapa en form med tex input name="a" onChange eller onBlur och kör en funktion som utför diverse grafiska ändrigar... this.style.borderColor eller nåt för att testa.
Du klarar det nog om du bara lär dig vilka attribut du ska ändra för respektive element.