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

0

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

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

Код 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>'; 

} 
  • 1
    сделать проверку перед отправкой
  • 0
    Что вы хотите, это, вероятно, проверка JavaScript. Просто отметьте 2 текстовых поля, прежде чем отправлять их, и запретите поведение кнопки отправки по умолчанию до тех пор, пока введенные данные не будут действительными. Но не полагайтесь на JS vor validation, всегда проверяйте пользовательские входы на вашем сервере.
Показать ещё 1 комментарий
Теги:
webpage

4 ответа

1

Чтобы проверить, пусто ли имя пользователя, выполните следующее:

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

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

1

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

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

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

и добавьте раздел javascript

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

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

Попробуйте 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>

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

  • 0
    Привет, я попытался добавить это, но я не получаю это.
  • 0
    Проверьте мой ответ на редактирование
Показать ещё 2 комментария
1

Вы можете добавить элемент 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; для прекращения подачи.

  • 0
    Привет, я попытался добавить это, но я не получаю это.
  • 0
    Вы добавили идентификатор в форму? Вам также нужно включить JQuery на вашей странице.
Показать ещё 6 комментариев
0

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

<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>
  • 0
    Поддержка браузера может быть проблемой здесь, в зависимости от целевой аудитории, это не может быть решением.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню