单击提交按钮后如何删除文本框的红色边框

Question

当前代码：

    /******Function checkRequired()*************/
   function checkRequired() {
       /**********In the starting of function error test are remove after entering proper input but red border still as it is*******************/
       $("#elmFirstNameError").html(" ");
       $("#elmMiddleNameError").html(" ");
       $("#elmLastNameError").html(" ");

       var firstname = $("#firstnameId").val().trim();
       var lastname = $("#lastnameId").val().trim();
       var middlename = $("#middlenameId").val().trim();
       if (firstname == "") {
         // $("#firstnameId").removeClass("errorMsg");
         $("#firstnameId").addClass("red-border");
         $("#elmFirstNameError").text("Please Enter First Name");

         return false;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <label for="txtFirstName">First Name<span class="required">*</span>
    </label>
  </td>
  <td>
    <input type=text name="firstname" id="firstnameId" class="" maxlength="30">
  </td>
  <td id="elmFirstNameError" class="errorMsg">&nbsp;</td>
</tr>
<tr>
  <td>
    <label for="txtMiddleName">Middle Name<span class="required"></span>
    </label>
  </td>
  <td>
    <input type=text name="middlename" id="middlenameId" maxlength="30">
  </td>
  <td id="elmMiddleNameError" class="errorMsg">&nbsp;</td>
</tr>
<tr>
  <td>
    <label for="txtLastName">Last Name<span class="required">*</span>
    </label>
  </td>
  <td>
    <input type=text name="lastname" id="lastnameId" maxlength="30">
  </td>
  <td id="elmLastNameError" class="errorMsg">&nbsp;</td>
</tr>

Answer 1

您的CSS可能正在设置

.red-border {
     border: red;
}

所以你需要你的JavaScript事件处理程序来删除这个类。执行与使您的元素变为红色的JavaScript代码行相反的内容：

$("#firstnameId").addClass("red-border");