html - PHP registration form: Make the inputs with red borders if there is an error -
i'm making registration form php , i'd something: if user has not completed form correctly, want, in addition error message, make inputs (where there error) red borders.
my registration form (html part):
<?php if(!empty($errors)): ?> <div class="flash-message error"> <h3>you have not completed form correctly. error(s) come(s) following thing(s):</h3> <ol> <?php foreach($errors $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 identity on site; displayed wherever 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 valid email receive confirmation link validate account.</p> </li> <li> <label for="password">password:</label> <input id="password" name="password" type="password"> <p class="input-description">enter password sign in account. try put difficult password make more complicated 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 password have put in field above.</p> </li> </ul> <button type="submit" class="button primary">sign up</button> </form>
current result: http://prntscr.com/86h5r2
php code:
<?php if(!empty($_post)) { /* nickname */ if(empty($_post["nickname"])) { $errors["nickname"] = "you have not completed nickname field."; } elseif(!preg_match("/^[a-za-z0-9 _]+$/", $_post["nickname"])) { $errors["nickname"] = "your nickname not valid."; } /* e-mail */ if(empty($_post["email"])) { $errors["email"] = "you have not completed email field."; } elseif(!filter_var($_post["email"], filter_validate_email)) { $errors["email"] = "your email not valid."; } /* password */ if(empty($_post["password"])) { $errors["password"] = "you have not completed 2 password fields."; } elseif($_post["password"] != $_post["password-confirmation"]) { $errors["password"] = "the passwords did not match. please enter same password in both fields."; } } ?>
to add border input error want embed php if statement in class attributes. define classname in css
<input type="text" class="<?= isset($error['name']) ? 'has-error' : '' ?>" value="" >
Comments
Post a Comment