Привет, у меня есть два текстовых поля. Один для имени пользователя, а другой - для пароля. В настоящее время у меня есть код для отображения сообщения об ошибке "Недопустимые учетные данные", если какое-либо из полей осталось пустым. Это приведет меня к новой странице, отобразит сообщение об ошибке и вернет меня на домашнюю страницу, где я могу снова ввести свое имя пользователя и пароль.
Я хочу, чтобы часть проверки была сделана рядом с текстовым полем. Например, если текстовое поле пользователя осталось пустым и нажата кнопка отправки, он должен отобразить сообщение типа "Пожалуйста, введите имя пользователя рядом с текстовым полем".
Код 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>';
}
Чтобы проверить, пусто ли имя пользователя, выполните следующее:
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
он не перейдет на следующую страницу, но останется на текущей странице, показывая сообщение об ошибке.
Для этого вы можете использовать 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>
Это очень простая демонстрация. но вы, безусловно, можете опираться на него.
Вы можете добавить элемент 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;
для прекращения подачи.
Вы также можете использовать новую функцию 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>