Find solution
How to style the HTML5 form validation messages?

Javascript help please?

  • hi i have a made a website so far using html5 and styled it with css i'm wanting to know how to a Javascript function which performs client-side validation with the following two checks: a) Check e-mail address- Checks that the user has entered a valid e-mail address (the e-mail address should contain one ‘@’ sign and at least one dot ‘.’). If an invalid e-mail address is entered the message “invalid e-mail address” should appear directly under the e-mail entry box. & b) Check phone Number – Checks that the user has entered a valid phone number composed of only numbers. If an invalid phone number is entered the message “invalid phone number” should appear directly under the phone number entry box. here is the html: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Contact Form</title> <link href="../css/contact.css" rel="stylesheet" type="text/css"> </head> <body> <header class="body"> </header> <section class="body"> <h1> Contact form </h1> <form> <label>Name</label> <input name="name" placeholder="Enter"> <label>Surname</label> <input name="surname" placeholder="Enter"> <label>Email</label> <input name="email" type="email" placeholder="Enter"> <label>Phone Number</label> <input name="usrtel" type="tel" placeholder="Enter"> <button type="submit">Click me</button> </form> </section> <footer class="body"> </footer> </body> </html> and here is the css: label { display:block; margin-top:25px; letter-spacing:2px; } /* Centres the page */ .body { display:block; margin:0 auto; width:576px; } /* the form will now be centered */ form { margin:0 auto; width:459px; } /* what this part of the css does is allow me to style the actually text boxes */ input, textarea { width:400px; height:25px; border:1.0px solid #dedede; padding:10px; margin-top:3px; font-size:1.0em; border-radius: 10px; } body { background-color:#6E7B8B; font-family: Verdana, Geneva, sans-serif; } h1{ font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 35px; } button{ height:px; margin-top: 10px; padding: 5px; border-radius : 6px; }

  • Answer:

    I believe you could get a good answer to this at stackoverflow.com, which is a programming q&a website. But before you do, please try Googling for "e-mail validation javascript", you'll get lots of info.

bjorn at Yahoo! Answers Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.