html - PHP- Validation message under text field -
new this. validation code works perfectly.
however, trying message echo under each text field.
i have tried changing echo error message (changing echo $c_errorerr/$c_pass1err) , echo $c_errorerr/$c_pass1err next input field , wrapping in span class.
however, method stops validation messages working. suggestions
html
<!-- <div id="first">--> <input type="email" id="email" name="email" placeholder="email address" value='' required> <br> <figure> <input class ="login-field" type="password" id="pass1" name="pass1" value="" placeholder="password" maxlength="30" required><!--<span class="error"><?php //echo $c_pass1err; ?></span>--> <input class ="login-field" type="password" id="pass2" name="pass2" value="" placeholder=" confirm password" maxlength="30" required><!--<span class="error"><?php //echo $c_pass2err; ?></span>--> <div id="messages"></div> </figure> <p class="remember_me"> </p> <input type="submit" name="submit" value="register" id="submit_button" class="btn btn-default"> <br> </form> php
<?php if (isset($_post['submit'])) { $c_email = $_post['email']; $c_pass1 = $_post['pass1']; $c_pass2 = $_post['pass2']; $c_emailerr = $pass1err = $pass2err = ""; //$c_email = $c_pass1 = $c_pass2 = ""; // remove illegal characters email //$c_email = filter_var($c_email, filter_sanitize_email); //checking email address if (!filter_var($c_email, filter_validate_email) === false) { echo ("<b id='email'> valid email address </b>"); } else { echo ("<b id='email'> email not valid email address</b>"); } if (strlen($c_pass1) <= '8') { echo "<b>your password must contain @ least 8 characters!</br>"; //check passwords }elseif ($c_pass1 == $c_pass2) { $q = "insert cus_register(cus_email,cus_password,cus_confirm_password) values (?,?,?)"; $stmt = mysqli_prepare($dbc, $q); //new // $stmt = mysqli_prepare($dbc, $insert_c); //debugging //$stmt = mysqli_prepare($dbc, $insert_c) or die(mysqli_error($dbc)); mysqli_stmt_bind_param($stmt, 'sss', $c_email, $c_pass1, $c_pass2); if ($q) { echo "<script> alert('registration sucessful')</script>"; } } else { echo "<b>oops! passwords not </b>"; } } ?>
here's 2-cents worth (no dependencies):
- validate javascript better usability.
- don't echo throughout php-ing. save error messages in array. can extend array every form element have.
- add verification events form controls after page loads, rather cluttering html.
this not intended use-as-is form exact needs, since can't know needs are, hope answers underlying questions.
in example, form element class "verify-me" verified js verifydata function. function uses control value data, , control name method of validation. can add many elements need.
i copied 'verify-as-you-go' method used in php validation, if have many form elements, can use switch statement similar js way shown here keep code tighter.
hope find useful.
<?php $password = $c_email = $c_pass1 = $c_pass2 = $email_status = $password_status1 = $password_status2 = ""; $err_array = array('email_err' => '', 'password_err1' => '', 'password_err2' => ''); if (isset($_post['submit'])) { $c_email = clean_input($_post["email"]); if (!filter_var($c_email, filter_validate_email) === false) { // email okay } else { $err_array['email_err'] = 'not valid email'; } $c_pass2 = clean_input($_post["c_pass2"]); $c_pass1 = clean_input($_post["c_pass1"]); if (strlen($c_pass1) <= '8') { $err_array['password_err1'] = "password must @ least 8 characters"; } elseif ($c_pass1 == $c_pass2) { // carry on fucntions } else { $err_array['password_err2'] = "ooops, passwords don't match"; } } function clean_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> <!doctype html> <html> <title>form validation</title> <style type = "text/css"> .error { color: red; } </style> <h1>form</h1> <form method="post" action="<?php echo htmlspecialchars($_server["php_self"]);?>"> e-mail: <input type="text" name="email" class = "verify-me" value = "<?=$c_email?>"> <span class="error"><?php echo $err_array['email_err']; ?></span> <br> password: <input type="text" name="c_pass1" class = "verify-me" value = "<?=$c_pass1?>"> <span class="error"><?php echo $err_array['password_err1']; ?></span> <br> password again: <input type="text" name="c_pass2" class = "verify-me" value = "<?=$c_pass2?>"> <span class="error"><?php echo $err_array['password_err2']; ?></span> <br><br> <input type="submit" name="submit" value="submit"> </form> </body> <script> // set onclick , onchange events inputs classname: 'verify-me' var verify = document.getelementsbyclassname('verify-me'); (var = 0; < verify.length ; i++) { verify[i].onclick = function () { reseterror( ); } ; verify[i].onchange = function () { verifydata( this, this.name ); } ; } // function clear error code when input edited function reseterror (inputelement) { inputelement.nextelementsibling.innerhtml = ''; } // check item value, , run test according datatype. function verifydata(item, datatype) { switch (datatype) { case 'email': if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(item.value)) { console.log('c_pass1 okay'); } else { item.nextelementsibling.innerhtml = 'not valid email address'; } break; case 'c_pass1': if (item.value.length >= 8) { console.log('c_pass1 okay'); } else { item.nextelementsibling.innerhtml = 'password must 8 characters or more'; } break; case 'c_pass2': if (item.value == document.getelementbyid('c_pass1.value')) { console.log('c_pass2 okay'); } else { item.nextelementsibling.innerhtml = 'passwords not match'; } break; } } </script> </html>
Comments
Post a Comment