/    Sign up×
Community /Pin to ProfileBookmark

Texfield validation + CSS

Copy linkTweet thisAlerts:
Jan 14.2015

Hi to all.
I didnt work much with JS so please be patient :-).

I want to make some email validation that will check for standard email format.
Basically, i need to make one registration page where i have to check email, empty fields etc.

Am planing to mix js with css to get some nice effect.
The idea is to highlight the inline border of textfield after js detects wrong or no entry…
when the user starts to write text in second field or when he presses submit.
I would use this approach on all fields.

[CODE]
function testMail(userMail) {
var mailMask = /^(?:[w!#$%&’*+-/=?^`{|}~]+.)*[w!#$%&’*+-/=?^`{|}~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-](?!.)){0,61}[a-zA-Z0-9]?.)+[a-zA-Z0-9](?:[a-zA-Z0-9-](?!$)){0,61}[a-zA-Z0-9]?)|(?:[(?:(?:[01]?d{1,2}|2[0-4]d|25[0-5]).){3}(?:[01]?d{1,2}|2[0-4]d|25[0-5])]))$/;

if(!userMail.match(mailMask)) {
/* RUN CODE FOR INLINE BORDER HIGHTLIGHT */
return false;
}
return true;
}[/CODE]

Any idea how to create and add this css part into JS code ?

Mark

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@LesshardtoofindJan 18.2015 — I am not sure how much you are asking for but specifically how to style an input field via JavaScript you can use the [B]style[/B] method of your[B] getElementById()[/B] call. Such as this.
[CODE]
document.getElementByID(id).style.boxShadow = "0 0 5px red inset";
[/CODE]

Further a function could be created that will grab any element on your page no matter if it is a <div></div> <input></input> or other tag. You only need to give this element a recognizable ID such as:

[code=html]
<input id="target"></input>
[/code]

Then the function could look as following:

[CODE]
function ChangeInsetBoxShadowColor(color, id){
var Input = document.getElementById(id);
Input.style.boxShadow = "0 0 5px " + color + " inset";
Input.style.backgroundColor = "transparent";
}
[/CODE]

Calling the function would look like:

[CODE]
ChangeInsetBoxShadowColor("red", "target");
[/CODE]

For great documentation on all your possibilities with the [B]style[/B] method of your[B] getElementById()[/B] visit this website for a great reference. http://www.w3schools.com/jsref/dom_obj_style.asp


And finally a simple page that will change the inset boxshadow on two input fields when it loads:

[CODE]<!DOCTYPE html>
<head>
<style>
.target{
position: relative;
top: 400px;
left: 500px;
}
</style>
<script>
window.onload = function(){ChangeInsetBoxShadowColor("red", "input"); ChangeInsetBoxShadowColor("green", "output");}
function ChangeInsetBoxShadowColor(color, id){
var Input = document.getElementById(id);
Input.style.boxShadow = "0 0 5px " + color + " inset";
Input.style.backgroundColor = "transparent";
}
</script>
</head>
<body>
<div id="target" class="target"><input id="input"></input><input id="output"></input></div>
</body>
</html>[/CODE][CODE][/CODE][CODE][/CODE]
×

Success!

Help @newJSuser spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...