Как добавить проверку на текстовое поле на веб-странице?

Question

Привет У меня есть два текстовых поля. Один для имени пользователя, а другой - для пароля. В настоящее время у меня есть код для отображения сообщения об ошибке «Недопустимые учетные данные», если какое-либо из полей осталось пустым. Это приведет меня к новой странице, отобразит сообщение об ошибке и вернет меня на домашнюю страницу, где я могу снова ввести свое имя пользователя и пароль.

Я хочу, чтобы часть проверки выполнялась рядом с текстовым полем. Например, если текстовое поле пользователя осталось пустым и нажата кнопка отправки, он должен отобразить сообщение типа «Пожалуйста, введите имя пользователя рядом с текстовым полем».

HTML код:

<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 код для проверки:

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

Вы можете использовать Javascript или JQuery для этого. Я проиллюстрирую javascript для вашего легкого понимания.

На вашей форме, изменить первую строку

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

и добавить яваскрипт раздел

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

Вам нужно будет добавить «ID» для каждого текстового поля вы хотели бы проверить ,

Попробуйте ---

<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> 

Это очень простая демонстрация. но вы, безусловно, можете опираться на него.

Answer 2

Вы можете добавить HTML элемент рядом с элементом сказать

<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> 

Затем

с помощью 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> 

return false; остановить отправляете.

Answer 3

Для проверки, если имя пользователя пусто просто сделать это:

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

Если вы хотите, чтобы это рядом с текстовым полем, просто поместите его в месте, где текст будет показывать как можно ближе к текстовому полю, так что на начало подачи кнопки. Если вы хотите, чтобы при появлении этой ошибки он не мог войти в систему. Вы можете использовать логическое значение следующим образом:

$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 
    } 
} 

Это удостоверится, когда $check=false он не пойдет на следующую страницу, но остаться на текущей странице, отображая сообщение об ошибке.

Answer 4

Вы также можете использовать HTML 5 новую функцию с запросом атрибута на входных тегах.LIKE пример:

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

использовать эту функцию выше, если вам нужно объявить до того элементов.

Вы также можете настроить пользовательскую ошибку, используя событие oninvalid и setCustomValidity (""). Пример:

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

И пример формы для входа в систему показан ниже. Из-за новых возможностей HTML 5, sdata не доходит до того, чтобы действительно разорвать его, он запускается в браузере пользователя, поэтому после нажатия кнопки «Отправить» он мгновенно отображает сообщение об ошибке. И его дизайн может поддерживаться CSS с помощью новых селекторов css. Спасибо и попробуйте, как показано ниже.

<!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>