区块链技术博客
www.b2bchain.cn

发生错误时将输入字段更改为其他颜色 – javascript程序员分享

本文介绍了发生错误时将输入字段更改为其他颜色 – javascript程序员分享,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

我已经使用引导程序设置了php登录页面。当字段保留为空,无效的电子邮件或用户名已被使用时,我想将输入字段更改为红色。当前,当用户单击“注册”时,它将打开一个包含这些消息的新页面。

如何仅将输入字段更改为红色并在输入字段中显示消息?

这是我的PHP代码:

require("config.php"); if(!empty($_POST))  {      // Ensure that the user fills out fields      if(empty($_POST['username']))      { die("Please enter a username."); }     if(!filter_var($_POST['username'], FILTER_VALIDATE_EMAIL))      { die("Invalid E-Mail Address"); }       if(empty($_POST['password']))      { die("Please enter a password."); }       // Check if the username is already taken     $query = "          SELECT              1          FROM users          WHERE              username = :username      ";      $query_params = array( ':username' => $_POST['username'] );      try {          $stmt = $db->prepare($query);          $result = $stmt->execute($query_params);      }      catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }      $row = $stmt->fetch();      if($row){ die("This email address is already registered"); } 

这是HTML代码:

<div class="container hero-unit">         <div class="row" style="margin-top:20px">     <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">         <form action="register.php" method="post" role="form">             <fieldset>                 <h2>Please Register</h2>                 <hr class="colorgraph">                 <div class="row">                     <div class="col-xs-6 col-sm-6 col-md-6">                         <a href="#" class="btn btn-lg btn-facebook btn-block"><i class="fa fa-facebook"></i> &nbsp;Sign in with Facebook</a>                     </div>                     <div class="col-xs-6 col-sm-6 col-md-6">                         <a href="#" class="btn btn-lg btn-info btn-block"><i class="fa fa-twitter"></i> &nbsp;Sign in with Twiter</a>                     </div>                 </div>                 <div class="login-or">                     <hr class="hr-or">                     <span class="span-or">or</span>                 </div>                 <div class="form-group">                     <input type="email" name="username" id="email" class="form-control input-lg" placeholder="Email Address" value="<?php echo $submitted_username; ?>">                 </div>                 <div class="form-group">                     <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">                 </div>                 <hr class="colorgraph">                 <div class="row">                     <div class="col-xs-6 col-sm-6 col-md-6">                         <input type="submit" class="btn btn-lg btn-primary btn-block" value="Register" />                       </div>                     <div class="col-xs-6 col-sm-6 col-md-6">                         <a href="index.php" class="btn btn-lg btn-info btn-block">Sign In</a>                     </div>                 </div>             </fieldset>         </form>     </div> </div> 

 

如果您还需要我提供其他任何信息,请通知我

参考方案

看看jquery validate documentation
您需要在表单上调用validate方法。

<script> $("#formId").validate(); </script> 

我正在编写一个在线时间跟踪网页,允许用户将学习时间输入该系统。用户将首先输入名称,然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#034…

我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符,该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件,例如文本框,标签和按钮。当我单击我的更新按钮时,它可以正常工作,这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏(位于我的母版页中)具有引导程序设置。我在导航栏中添加了一个下…

如何设置Telerik单选按钮所需的字段验证器?我想在按钮单击“ BtnSave”上设置必填字段验证器吗?请帮忙!<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…

我正在开始编码。我正在使用Symfony 3.3我想用复选框隐藏(并显示)表上的a或某些特定行。我尝试使用javascript和jquery。我希望隐藏的行保持隐藏状态。我不知道该怎么做。这是我的树枝{% block body %} <div class="container"> <h3>List of produ…

据我所知,此代码必须有效,但是我编码时却无效问题在于该表单未提交。我该如何解决?选中时,我什至没有得到复选框的值。<table id="example" class="display" cellspacing="0" width="100%"> <thead&g…

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 发生错误时将输入字段更改为其他颜色 – javascript程序员分享
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们