如何在网页中添加文本框验证？

Question

Hi I have two text boxes. One is for username and other one is for password. Currently I have code for displaying a error message saying "Invalid credentials" if any of the fields are left blank. This takes me to the new page displays the error message and takes me back to the home page where I can enter my username and password again.

I want the validation part to be done near the text box itself. For example if Username textbox is left blank and submit button is clicked, it should display a message like Please enter the username near the textbox itself.

HTML code:

<form method="post" action="login.php">
      <p class="user_text">USER LOGIN</p>
      <p class="user_name_text">username<span style="color:#f60219;"> *</span></p>
      <p style="padding:8px 0 0 5px;">

        <input type="text" name="username" minlength="2" maxlength="20" class="contact_filed" value="enter your name" onfocus="javascript:clearField(this,'enter your name')" onblur="javacript:fillField(this,'enter your name')" /></label>
     </p>
      <p class="user_name_text1">password<span style="color:#f60219;"> *</span></p>
      <p style="padding:8px 0 0 5px;">
        <input type="password" name="password" maxlength="20" class="contact_filed" value="password" onfocus="javascript:clearField(this,'password')" onblur="javacript:fillField(this,'password')" />
      </p>
      <p style="padding:16px 0 0 16px;"><input name="submit" type="submit" value="Submit" class="log" /></p>
      <p style="padding:12px 0 0 16px;"><a href="#" class="read_more1">Create new account</a><a href="#" class="read_more1">Request new password</a></p>
</form>

PHP code for validation:

if ($_POST['submit']) { 
include('connect.php'); 
$u = mysql_real_escape_string($_POST['username']); 
$p = md5($_POST['password']); 
$q = mysql_query("SELECT id FROM $login_db_table WHERE username='$u' AND password='$p' LIMIT 1"); 

if (mysql_fetch_array($q, MYSQL_ASSOC)) { 
    if ($_POST['remember']) { 
        setcookie('username', $_POST['username'], time() + 5000000); 
        setcookie('password', md5($_POST['password']), time() + 5000000); 
    } else { 
        setcookie('username', $_POST['username']); 
        setcookie('password', md5($_POST['password'])); 
    } 


if($u != "" && $p !=""){
echo '<p>Login successful.</p>'; 
header("Location: main.php");
}

} 

else
echo "Login failed. Please enter valid credentials.";
echo "<script>setTimeout(\"location.href = 'http://localhost/CashTree/reg/Home/index.html';\",1500);</script>";
    //echo '<p>Login failed. Please enter your correct credentials</p>'; 

} 

Answer 1

You can use javascript or jquery for this. I will illustrate with javascript for your easy understanding.

On your form, change the first line to

<form method="post" action="login.php" onsubmit="return check_error();">

and add a javascript section

<script>
function check_error(){
   if(document.getElementById('username_id').value == ""){
      alert("Enter The Username");
      return false;
   }
}
</script>

You will need to add the "ID" for each textbox you would like to be verified.

Try this---

<script language="javascript">
function check_error(){
    if(document.getElementById('username').value == ""){
        alert('Please Enter Username');
        return false;
    }
}
</script>
<form method="post" onSubmit="check_error();">
<input type="text" name="username" id="username" />
<input type="submit" value="Submit" />
</form>

It is a very simple demonstration. but you can certainly build on it.

Answer 2

You can add an html element near the element say

    <p style="padding:8px 0 0 5px;">

        <input id="uname" type="text" name="username" minlength="2" maxlength="20" class="contact_filed" value="enter your name" onfocus="javascript:clearField(this,'enter your name')" onblur="javacript:fillField(this,'enter your name')" />
<div id="user_name_invalid"></div>
     </p>

Then

using jQuery

<script type='text-javascript'>
 $("#form").submit(function(e){
   var uname = $("#username").val();
   if(uname == ""){
     $("#user_name_invalid").html("Username is invalid");
     return false;
   }
}
</script>

the return false; to stop the submitting.

Answer 3

For checking if the username is empty just do this:

if($_POST['username']=''){
   echo 'Please enter the username';
}

If you want this near your textbox, just put it in place where the text will be showing as close to the textbox, so at the beginning of submitting the button. If you want that when this error is showing he shouldn't actually login. You could use a boolean like so:

$check=true;
if ($_POST['submit']) { 
   if($_POST['username']=''){
   echo 'Please enter the username';
   $check=false;
   }
   if($check){
   //everything you want to do if it's succesfull
   }
}

This will make sure when the $check=false it wont go to the next page but stay on the current page, displaying the error message.

Answer 4

You can also use HTML 5 new feature of reququired attribute on input tags. LIKE an example of :

<input type='text' name='txt_username' required='true' />
<input type='password' name='txt_password' required='true'/>

To use that above feature, you should need to declare before elements.

You can also set custom error meesage using "oninvalid" event and setCustomValidity("") function. A example :

<input type='text' name='txt_photo_title' value='' required='true' placeholder="photo name" oninvalid="setCustomValidity('Please Enter Photo Name !');" />

And some sample login form is shown as below. Due to HTML 5 new features, sdata don't reach to sever actually, it excutes in user's browser and so after click submit button, it show error msg instantly. And its design can be maintained by CSS with new css selectors too. Thanks and try it as below sample.

<!DOCTYPE HTMl>
<html>
<head>
    <title> Test Form</title>
</head>
<body>
    <h1> Test Validation Form</h1>
    <hr>

    <form name='frm_test' method='post' action='login.php' > 
        <label> Username :</label>
        <input type='text' name='txt_username' required='true' oninvalid="setCustomValidity('Please enter username !');"/>
        <br/>
        <label> Password :</label>
        <input type='password' name='' required='true' oninvalid="setCustomValidity('Please Enter passwords !');"/>

        <input type='submit' name='btn_submit' value='Login'>
    </form>
</body>
</html>