Javascript Regex Validation and Instant Feedback

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 2100 Views - Last Post: 10 January 2012 - 02:35 AM

#1 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 10:09 PM

I have a simple form with 2 fields. I already have PHP validation set up, but im implementing Javascript validation too.

My function for testing against my regex is sort of working. But nomatter what I type in the form it always gives me the same answer. I am calling this function during the onsubmit of a form.

 <script type="text/javascript" language="javascript">
    function validateIGN(ign) {
        var validign = /^[a-zA-Z0-9]{1,30}$/;
        if (!validign.test(ign)) {
        alert("invalid ign!");
    }
    else {
    	alert("valid ign!")
    }
    }
    </script>


Once I get this working, I would love some help getting it to check during the typing and not just onsubmit. I want the input and output to be two different areas. The input would be the form, and the output would be a div beside it; hopefully invisible until there is an error.

Here is the relevant form information,

 <form name= "newsletter" class="newsletter" action="doNewsletter.php" onsubmit="return validateIGN();" method="post">


Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Regex Validation and Instant Feedback

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 11:45 PM

compare the following lines:
function validateIGN(ign) {

onsubmit="return validateIGN();"

anything jumping to the eye?
Was This Post Helpful? 0
  • +
  • -

#3 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 11:47 PM

View PostDormilich, on 09 January 2012 - 11:45 PM, said:

compare the following lines:
function validateIGN(ign) {

onsubmit="return validateIGN();"

anything jumping to the eye?


Do I have to pass through the ign parameter there? Wouldn't that make the parameter "ign" not what is inserted in the form?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 11:50 PM

View PostRavage, on 10 January 2012 - 07:47 AM, said:

Do I have to pass through the ign parameter there? Wouldn't that make the parameter "ign" not what is inserted in the form?

there are only very few occasions, where JS automatically passes function parameters (and inline JS does not do that at all). so yes, you have to pass the data you want yourself.
Was This Post Helpful? 0
  • +
  • -

#5 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 11:55 PM

View PostDormilich, on 09 January 2012 - 11:50 PM, said:

View PostRavage, on 10 January 2012 - 07:47 AM, said:

Do I have to pass through the ign parameter there? Wouldn't that make the parameter "ign" not what is inserted in the form?

there are only very few occasions, where JS automatically passes function parameters (and inline JS does not do that at all). so yes, you have to pass the data you want yourself.


So how would I do that? form.ign.value?

Thanks, newsletter.ign.value worked.

Could you help me make this work while typing and not with an alert box now?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 11:57 PM

probably this.ign.value, but since I never do inline JS, I'm not that sure.

what I would do:
function validateIGN() {
    var validign = /^[a-zA-Z0-9]{1,30}$/;
    if (!validign.test(this.value)) {
        alert("invalid ign!");
    }
    else {
        alert("valid ign!")
    }
}
// W3C syntax
document.newsletter.ign.addEventListener("change", validateIGN, true);


This post has been edited by Dormilich: 09 January 2012 - 11:57 PM

Was This Post Helpful? 0
  • +
  • -

#7 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 09 January 2012 - 11:58 PM

View PostDormilich, on 09 January 2012 - 11:57 PM, said:

probably this.ign.value, but since I never do inline JS, I'm not that sure.

what I would do:
function validateIGN() {
    var validign = /^[a-zA-Z0-9]{1,30}$/;
    if (!validign.test(this.value)) {
        alert("invalid ign!");
    }
    else {
        alert("valid ign!")
    }
}
// W3C syntax
document.newsletter.ign.addEventListener("change", validateIGN, true);



Yeah I'm a noob when it comes to Javascript.. care to explain the w3c syntax?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:08 AM

W3C syntax: used by every browser except for IE < 9 (more detailed info here)

basically it is element.addEventListener(event_type, handler, capturing);
that means, in case an <event_type> event happens on <element> in the capturing/bubbling phase, <handler> is invoked on <element>.
Was This Post Helpful? 0
  • +
  • -

#9 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:17 AM

View PostDormilich, on 10 January 2012 - 12:08 AM, said:

W3C syntax: used by every browser except for IE < 9 (more detailed info here)

basically it is element.addEventListener(event_type, handler, capturing);
that means, in case an <event_type> event happens on <element> in the capturing/bubbling phase, <handler> is invoked on <element>.



So maybe not a good idea to use because old IEs can't use it?

Anyway.. I'm a total noob when it comes to javascript. Could you help me make it so it will check while the user is typing instead of on submit, and output in a div nearby instead of an alert box?
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:23 AM

View PostRavage, on 10 January 2012 - 08:17 AM, said:

So maybe not a good idea to use because old IEs can't use it?

this is where cross-browser implementations kick in (and also a reason JS frameworks like jQuery are so popular).


View PostRavage, on 10 January 2012 - 08:17 AM, said:

Anyway.. I'm a total noob when it comes to javascript. Could you help me make it so it will check while the user is typing instead of on submit, and output in a div nearby instead of an alert box?

for the check-while-you-type you just need a different event type, "keyup" should do.

do you know how to output something into a <div> in general?
Was This Post Helpful? 0
  • +
  • -

#11 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:25 AM

View PostDormilich, on 10 January 2012 - 12:23 AM, said:

View PostRavage, on 10 January 2012 - 08:17 AM, said:

So maybe not a good idea to use because old IEs can't use it?

this is where cross-browser implementations kick in (and also a reason JS frameworks like jQuery are so popular).


View PostRavage, on 10 January 2012 - 08:17 AM, said:

Anyway.. I'm a total noob when it comes to javascript. Could you help me make it so it will check while the user is typing instead of on submit, and output in a div nearby instead of an alert box?

for the check-while-you-type you just need a different event type, "keyup" should do.

do you know how to output something into a <div> in general?


Nope. I could guess though.. getElementbyID, document.write? idk :D
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:33 AM

- document.write(): hands off until you know how it works

- getElementById() (note the spelling, JS is case-sensitive) lets you access an element. you'll definitely need that.

to write into an already existing div (retrieved via getElementById) you can either use the DOM's textContent property (unsurprisingly that has issues with IE) or the non-standard innerHTML (which works pretty much everywhere).
Was This Post Helpful? 0
  • +
  • -

#13 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:40 AM

View PostDormilich, on 10 January 2012 - 12:33 AM, said:

- document.write(): hands off until you know how it works

- getElementById() (note the spelling, JS is case-sensitive) lets you access an element. you'll definitely need that.

to write into an already existing div (retrieved via getElementById) you can either use the DOM's textContent property (unsurprisingly that has issues with IE) or the non-standard innerHTML (which works pretty much everywhere).


Ok, heres what I'd do.

function validateIGN() {
    var validign = /^[a-zA-Z0-9]{1,30}$/;
    if (!validign.test(this.value)) {
        document.getElementById('ignErrors').innerHTML = 'Your IGN is not formatted properly.';
        document.getElementById('ignErrors').style.border= 1px solid red;
        //ya I know I probably didn't need to select the elment twice but im not sure :P/>
    }
    else {
        
    }
}




How would I have the div be invisible until there is an error? or completely gone until theres an error?

I know I could do 100% opacity then remove that once there is an error.. but that would maybe screw up formatting and doesn't work in a lot of browsers.
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:51 AM

why using opacity, when there is visibility (in this case rather the display property).

the usual course of action would be setting the div invisible by default (via css) and make it visible for the error case.
Was This Post Helpful? 0
  • +
  • -

#15 Ravage  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 15-October 11

Re: Javascript Regex Validation and Instant Feedback

Posted 10 January 2012 - 12:55 AM

View PostDormilich, on 10 January 2012 - 12:51 AM, said:

why using opacity, when there is visibility (in this case rather the display property).

the usual course of action would be setting the div invisible by default (via css) and make it visible for the error case.


How would I shorten the above code? The two getelementbyids?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2