Nic727 Posted September 7, 2016 Share Posted September 7, 2016 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 More sharing options...
Ingolme Posted September 7, 2016 Share Posted September 7, 2016 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 More sharing options...
Nic727 Posted September 7, 2016 Author Share Posted September 7, 2016 (edited) 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 September 7, 2016 by Nic727 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 7, 2016 Share Posted September 7, 2016 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 More sharing options...
Nic727 Posted September 8, 2016 Author Share Posted September 8, 2016 ok thank you. Last question : I'm using onblur to have a feedback for users, but on some website, it's validating at the same time you are writing. What are they using? Link to comment Share on other sites More sharing options...
Ingolme Posted September 8, 2016 Share Posted September 8, 2016 There's onkeyup and oninput for that kind of behavior Link to comment Share on other sites More sharing options...
Nic727 Posted September 13, 2016 Author Share Posted September 13, 2016 (edited) 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 September 13, 2016 by Nic727 Link to comment Share on other sites More sharing options...
Nic727 Posted September 14, 2016 Author Share Posted September 14, 2016 I also saw on Outlook website that they are using onblur first and after it changes to oninput to be able to see if your correction is good. How can you change function like that? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 14, 2016 Share Posted September 14, 2016 They probably have the same listener attached to multiple events. You can attach one function to handle as many events as you want. Link to comment Share on other sites More sharing options...
Nic727 Posted September 21, 2016 Author Share Posted September 21, 2016 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 More sharing options...
dsonesuk Posted September 21, 2016 Share Posted September 21, 2016 Its a custom data- attribute, All start with 'data-', anything after is customisalble. http://www.w3schools.com/tags/att_global_data.asp Link to comment Share on other sites More sharing options...
Nic727 Posted September 21, 2016 Author Share Posted September 21, 2016 (edited) 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 September 21, 2016 by Nic727 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2016 Share Posted September 21, 2016 Apply a class name instead, use css tied to that class name to style as required. Link to comment Share on other sites More sharing options...
Nic727 Posted September 21, 2016 Author Share Posted September 21, 2016 Apply a class name instead, use css tied to that class name to style as required. Yep, but how can I make a different message showing for each of the input (bellow each of them)? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now