Jump to content

input validation not working - regex


Nic727

Recommended Posts

Hi,

 

I'm trying to get my input validating with my regex, but I don't know what's wrong with my code.

It look normal, but it's not working to change the border color or add the small text.

<script>
function validate(x){

var regex = /^[a-zA-Z0-9\-\_]{3,16}$/; /* ^ indique le début. $ indique la fin. */

if (x != regex){
document.getElementById('champ1').style.borderColor="red";
document.getElementById('Message').document.write("Vous devez suivre les instructions");
document.getElementById('Message').style.Color="red";
}else{
document.getElementById('champ1').style.borderColor="green";
document.getElementById('Message').document.write("Bravo!");
document.getElementById('Message').style.Color="green";
}
}
</script>
<form name="formulaire" action="" method="post">
Entrer ce que vous voulez : <input id="champ" type="text" name="champ"  onblur="validate(this)"><br>
</form>
<p id="Message"></p>

My goal is that when I "unblur" the field, it check if it match the regex variable. If it's not the same (where my x != regex) the border color is red and the message is appearing with red text. If it's correct, it should be green.

 

For now it's not working and I don't know why.

 

Thank you

Link to comment
Share on other sites

First, you need to pass the actual input's value. You're passing the input element itself. This is what you should do: validate(this.value)

 

 

You have to call the test() method

if(regexp.test(x)) {

This won't work:

document.getElementById('Message').document.write("Vous devez suivre les instructions");

Elements don't have a document property, even if it did, document.write() deletes everything on the page before writing if it's called after the page has finished loading.

 

What you can do is set the innerHTML property of the element:

document.getElementById('Message').innerHTML = "Vous devez suivre les instructions";
Link to comment
Share on other sites

Working weirdly...

<script>
function validate(x){
var regex = /^[a-zA-Z0-9\-\_]{3,16}$/; /* ^ indique le début. $ indique la fin. */
if (regex.test(x)){
document.getElementById('champ1').style.borderColor="red";
document.getElementById('Message').innerHTML = "Vous devez suivre les instructions";
document.getElementById('Message').style.Color="red";
}else{
document.getElementById('champ1').style.borderColor="green";
document.getElementById('Message').innerHTML = "Bravo!";
document.getElementById('Message').style.Color="green";
}
}
</script>
Entrer ce que vous voulez : <input id="champ1" type="text" name="champ"  onblur="validate(this.value)"><br>
<p id="Message"></p>

When it's correct it show in red and when not it show in red.

 

 

PS: What if I have multiple input? I will not be able to have the same function?

Edited by Nic727
Link to comment
Share on other sites

It looks like you have that if statement backwards. regex.test returns true if the input matched the regular expression, so that sounds like you would want that to be green instead of red if it matches.

 

PS: What if I have multiple input? I will not be able to have the same function?

Identify everything in the function that needs to change for different inputs and pass those things as parameters to the function in addition to the value you want to test.
Link to comment
Share on other sites

thx. It's working great now!

 

Just one thing I saw. It's not a problem, but maybe an issue with onblur itself. If I chose an autocomplete answer, it will show wrong until I click somewhere else. Maybe a workaround exist for this problem?

Edited by Nic727
Link to comment
Share on other sites

ok thank you.

 

Another question. Maybe it has nothing to do with real validation, but I was checking someone code to know more and I found some HTML5 attributes that can't be found on Google.

<input type="text" class="form-control input-lg" placeholder="3+1=" id="captcha" required pattern="4" data-validation-required-message="Please prove you're not a robot" aria-invalid="true">

so I know the pattern attribute (new in HTML5), it like regex, but what is data-validation message? I think it just doesn't exist, since there is no information on the web. Also, I don't know how you make the message appear in a specific div... I know the guy is actually using this message here when the field is empty and the message is appearing inside a <ul role="alert"></ul>.

The same ul is used multiple time for each input.

 

 

Also, I was thinking about is it better to add a PHP form validation?
http://www.w3schools.com/php/php_form_validation.asp

This page doesn't show if regex can be used in php.

Link to comment
Share on other sites

Thank you.

 

I think that's the last question I have for the validation. Everything is working, but my code is a bit too big and I just don't know how to optimize my code.

For now I'm doing a validation for each input one by one, but I just don't know where to start to reduce to number of lines in my code.

Here is my long code... I need to make a loop, but I thought about that for 1 hour and I'm not sure how to do that.

var regex_nom = /^[ ]*[a-zA-Z\u00C0-\u017F\-'\ ]+$/;
var regex_prenom = /^[a-zA-Z\u00C0-\u017F\-'\ ]+$/;
var regex_no = /^[\a-z\d\-.]{1,}$/i;

function validate1(x){

if (regex_nom.test(x)){ /* True if validate */
document.getElementById('nom').style.borderColor="green";
document.getElementById('nom').style.borderWidth="2px";
document.getElementById('Message1').innerHTML = " ";
}else{
document.getElementById('nom').style.borderColor="red";
document.getElementById('Message1').style.color ="red";
document.getElementById('Message1').innerHTML = "ERROR MESSAGE";
}
}

function validate2(x){

if (regex_prenom.test(x)){ /* True if validate  */
document.getElementById('prenom').style.borderColor="green";
document.getElementById('prenom').style.borderWidth="2px";
document.getElementById('Message2').innerHTML = " ";
}else{
document.getElementById('prenom').style.borderColor="red";
document.getElementById('Message2').style.color ="red";
document.getElementById('Message2').innerHTML = "ERROR MESSAGE";
}
}
function validate3(x){

if (regex_no.test(x)){ /* True if validate  */
document.getElementById('no').style.borderColor="green";
document.getElementById('no').style.borderWidth="2px";
document.getElementById('Message3').innerHTML = " ";

}else{
document.getElementById('no').style.borderColor="red";
document.getElementById('Message3').style.color ="red";
document.getElementById('Message3').innerHTML = "ERROR MESSAGE";
}
}
<form name="formtest" action="" method="POST">
<label>Nom :</label> <input id="nom" type="text" name="nom"  oninput="validate1(this.value)" required><p id="Message1"></p><br>
<label>Prénom :</label> <input id="prenom" type="text" name="prenom"  oninput="validate2(this.value)" required><p id="Message2"></p><br>
<fieldset><legend>Adresse</legend>
<label>No. :</label> <input id="no" type="text" name="no"  oninput="validate3(this.value)" required><p id="Message3"></p><br>
<button type="submit" value="submit">Submit</button>
</form>

There is some people where oninput or other event are not showing in the code. Weird.

Edited by Nic727
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...