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> Link to comment https://forums.phpfreaks.com/topic/109245-form-validation/ 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> .... Link to comment https://forums.phpfreaks.com/topic/109245-form-validation/#findComment-560518 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... Link to comment https://forums.phpfreaks.com/topic/109245-form-validation/#findComment-560520 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... Link to comment https://forums.phpfreaks.com/topic/109245-form-validation/#findComment-560550 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? Link to comment https://forums.phpfreaks.com/topic/109245-form-validation/#findComment-560660 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. Link to comment https://forums.phpfreaks.com/topic/109245-form-validation/#findComment-561804 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.