Jump to content

Form Validation


Dysan
 Share

Recommended Posts

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.