-1

I'd like some help implementing a custom HTML input message box where it visually shows the user when they've entered input that is correct,like going from a red x to a green check mark when the requirements are fulfilled in the pop-up message box. I've seen this before on other sites but Google searches haven't shown me any articles on how to do it. Here is my current HTML code on my website; I'd also like (if anyone has time) the Regex for needing at least 1 Capital Letter or symbol (I've got number and length) for the field. I'm a beginner, but I'm aware the answer might involve JS and definitely CSS. Thanks again.

<label for="pw1">Password:</label>
<br>
<input id="pw1" name="pword" type="password" maxlength="16" title="Must Contain one of the Following: A Number, A Symbol, or An Uppercase Letter" pattern="(?=.*\d).{8,16}" required /><br>```
zmag
  • 7,825
  • 12
  • 32
  • 42
  • please add some html and jquery you used and not working to visualize what you are trying to achive – chandra shekhar joshi Feb 27 '19 at 13:34
  • Welcome to Stack Overflow. Please read our [How to Ask a Question](https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/) article. We expect that you will have done your research before asking a question here and, when you do ask questions, that you will post code that you are working with along with what you've tried so far. – Scott Marcus Feb 27 '19 at 13:35
  • @chandrashekharjoshi Why are you asking for some JQuery? – Scott Marcus Feb 27 '19 at 13:36
  • Sorry I meant any script related to the code. @ScottMarcus – chandra shekhar joshi Feb 27 '19 at 13:52
  • I think this will be useful to you. [How to validate an email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript?rq=1) – Monkey D. Luffy Feb 27 '19 at 13:54

1 Answers1

1

Styling the element based on whether the content is valid or not is easy with the CSS :valid and :invalid pseudo-classes. 

input:valid { border:2px solid green; }
input:invalid { border:2px solid red; }
<label for="pw1">Password:</label>
<br > 
<input id="pw1" name="pword" type="password" maxlength="16" title="Must Contain one of the Following: A Number, A Symbol, or An Uppercase Letter" pattern="(?=.*\d).{8,16}" required />
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • if using safari/chrome you will get a blue glow around the input (making it hard to see the color) `input:focus {outline:none;}` will remove it :) – Nick Parsons Feb 27 '19 at 13:43
  • I forgot to add my CSS, just turns the border red on invalid and green on valid input. input:invalid { border-color: red; } input:valid { border-color: green; background-color: #ceffcd; } My question is more, how can I visually show the user when their input is correct/incorrect in the input message pop-up box that normally just says 'Please fill out this field'. I know how to edit the message and replace the default message, but how can I add a validation thingy that goes from say a red 'x' to a green 'check'? This'll be next to my requirements in the message box. –  Feb 27 '19 at 14:38