我正在使用PHP制作注册表单,我想做一些事情:如果用户没有正确填写表单,除了错误消息之外,我想要输入(出现错误)带红色边框。
我的注册表格(HTML部分):
<?php if(!empty($errors)): ?>
<div class="flash-message error">
<h3>You have not completed the form correctly. The error(s) come(s) from the following thing(s):</h3>
<ol>
<?php foreach($errors as $error): ?>
<li>
<p><?= $error; ?></p>
</li>
<?php endforeach; ?>
</ol>
</div>
<?php endif; ?>
<h1 class="page-heading"><?php echo $title; ?></h1>
<form action="" method="post">
<ul>
<li>
<label for="nickname">Nickname:</label> <input id="nickname" name="nickname" type="text">
<p class="input-description">Your nickname will be as an identity on the site; it will be displayed wherever you will post, etc.</p>
</li>
<li>
<label for="email">Email:</label> <input id="email" name="email" type="text" placeholder="your@email.com">
<p class="input-description">Enter a valid email to receive the confirmation link to validate your account.</p>
</li>
<li>
<label for="password">Password:</label> <input id="password" name="password" type="password">
<p class="input-description">Enter a password to sign in to your account. Try to put a difficult password to make it more complicated to find.</p>
</li>
<li>
<label for="password-confirmation">Password Confirmation:</label> <input id="password-confirmation" name="password-confirmation" type="password">
<p class="input-description">Confirm the password that you have put in the field above.</p>
</li>
</ul>
<button type="submit" class="button primary">Sign Up</button>
</form>
当前结果:http://prntscr.com/86h5r2
PHP代码:
<?php
if(!empty($_POST))
{
/* Nickname */
if(empty($_POST["nickname"]))
{
$errors["nickname"] = "You have not completed the nickname field.";
}
elseif(!preg_match("/^[a-zA-Z0-9 _]+$/", $_POST["nickname"]))
{
$errors["nickname"] = "Your nickname is not valid.";
}
/* E-mail */
if(empty($_POST["email"]))
{
$errors["email"] = "You have not completed the email field.";
}
elseif(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL))
{
$errors["email"] = "Your email is not valid.";
}
/* Password */
if(empty($_POST["password"]))
{
$errors["password"] = "You have not completed the two password fields.";
}
elseif($_POST["password"] != $_POST["password-confirmation"])
{
$errors["password"] = "The passwords did not match. Please enter the same password in both fields.";
}
}
?>
答案 0 :(得分:3)
要在输入中添加边框,但是您希望在类属性中嵌入这样的php if语句。只需在你的css中定义classname
<input type="text" class="<?= isset($error['name']) ? 'has-error' : '' ?>" value="" >
答案 1 :(得分:1)
向<li>
添加样式是一种方式
<ol>
<?php foreach($errors as $error): ?>
<li style="border:red solid 1px">
<p><?= $error; ?></p>
</li>
<?php endforeach; ?>
</ol>
更好的方法是创建一些css,然后只需在<li>
<style>
.an-error-msg {
border:red solid 1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
</style>
<ol>
<?php foreach($errors as $error): ?>
<li class="an-error-msg">
<p><?= $error; ?></p>
</li>
<?php endforeach; ?>
</ol>
答案 2 :(得分:0)
为什么不直接使用required
属性作为客户端,如下所示:https://jsfiddle.net/kn7qjg6c/
<强> HTML 强>
<form method="post">
<input type="text" placeholder="name" required/>
<input type="submit" />
</form>
<强> CSS 强>
input:required:focus {
border: 1px solid red;
outline: none;
}