Dysan Posted June 8, 2008 Share Posted June 8, 2008 Hi, using PHP and CSS, how do I change the text colour of a label and border colour of a input field upon a user not entering data into any of the fields, or entering an invalid email address or phone number (must be 11 characters)? <body> <form name="form1" method="post" action=""> <label>Name:</label> <input name="name" type="text" id="name"> <br> <br> <label>Email:</label> <input name="email" type="text" id="email"> <br> <br> <label>Phone:</label> <input name="phone" type="text" id="phone"> <br> <br> <label>Gender:</label> <select name="select"> <option>Male</option> <option>Female</option> </select> <br> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> Quote Link to comment Share on other sites More sharing options...
irvieto Posted June 8, 2008 Share Posted June 8, 2008 Hi. Create a "required" style. Then after checking the $_POST, you detect those invalid fields. The code could be something like this.. <?php //Default style is empty.. $style_req = array('name'=>'','email'=>'' ,'phone'=>'' ); /* Post checking...etc. if name is invalid... => $style_req['name'] = 'class="required"'; */ ?> <body> <form name="form1" method="post" action=""> <label <?=$style_req['name']; ?>>Name:</label> <input name="name" type="text" id="name"> <br> .... Quote Link to comment Share on other sites More sharing options...
webent Posted June 8, 2008 Share Posted June 8, 2008 As far as the entering an invalid email address or phone number (must be 11 characters) I use this,... var phoneNum = form.phone_number.value; var phoneNumLength = phoneNum.length; if (phoneNumLength != 11) { alert("The phone number provided is not valid."); form.phone_number.focus(); return false; } I'll check on the other part of your question... Quote Link to comment Share on other sites More sharing options...
webent Posted June 8, 2008 Share Posted June 8, 2008 ok,... got it... <script type="text/javascript"> <!-- function checkForm(form) { var phoneNum = form.phone.value; var phoneNumLength = phoneNum.length; if (phoneNumLength != 11) { alert("The phone number provided is not valid."); form.phone.focus(); changeDiv('phone_label','#ff0000'); return false; } } function changeDiv(the_div,the_change) { var the_style = getStyleObject(the_div); if (the_style != false) { the_style.color = the_change; } } function getStyleObject(objectId) { if (document.getElementById && document.getElementById(objectId)) { return document.getElementById(objectId).style; } else if (document.all && document.all(objectId)) { return document.all(objectId).style; } else { return false; } } // --> </script> <form name="thisForm" action="" method="POST" onSubmit="return checkForm(this)"> <label name="phone_label" id="phone_label" style="color:#000000;">Phone:</label> <input name="phone" type="text" id="phone"> <input type="submit" name="Submit" value="Submit"> </form> Hope you like... Quote Link to comment Share on other sites More sharing options...
Dysan Posted June 8, 2008 Author Share Posted June 8, 2008 Hi. Create a "required" style. Then after checking the $_POST, you detect those invalid fields. The code could be something like this.. <?php //Default style is empty.. $style_req = array('name'=>'','email'=>'' ,'phone'=>'' ); /* Post checking...etc. if name is invalid... => $style_req['name'] = 'class="required"'; */ ?> <body> <form name="form1" method="post" action=""> <label <?=$style_req['name']; ?>>Name:</label> <input name="name" type="text" id="name"> <br> .... Hi irvieto! I think I understand what you mean, can you give me a more detailed example to at least get one field working? Quote Link to comment Share on other sites More sharing options...
irvieto Posted June 10, 2008 Share Posted June 10, 2008 Sure. No problem. <?php $style_req = array('name'=>'','email'=>'' ,'phone'=>'' ); if( isset($_POST) ){ //Start Validations.. $err = 0; //Let's think everything is ok. if( trim($_POST['name'])=="" ){ $err = 1; // well, we found an error... $style_req['name'] = 'class="required"'; } if( trim($_POST['phone'])=="" ){ $err = 1; $style_req['phone'] = 'class="required"'; } #### # If an error is found, let the page load, it will show the labels with another style... ### if( $err==0 ){ //No errors //do something } } //isset... ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> <!--required fields with invalid data will have a label color "#CC3333" , etc. --> .required{ color:#CC3333; font-weight:bold; } </style> </head> <body> <form name="form1" method="post" action=""> <label <?php echo $style_req['name']; ?> >Name:</label> <input name="name" type="text" id="name"> <br> <br> <label <?php echo $style_req['email']; ?> >Email:</label> <input name="email" type="text" id="email"> <br> <br> <label <?php echo $style_req['phone']; ?>>Phone:</label> <input name="phone" type="text" id="phone"> <br> <br> <label>Gender:</label> <select name="select"> <option>Male</option> <option>Female</option> </select> <br> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> </html> To validate the email address, you can use the getmxrr function. ( http://cr.php.net/manual/en/function.getmxrr.php ) but only works on Unix/linux systems. Hope this helps. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.