Question

我正在使用Modal中的表单。我想验证它，但它无法正常工作。

详细说明：

我没有提交按钮，而是使用名为Login的锚链接来使用ajax提交我的表单。但在此之前，我想做一些验证。我在控制台中遇到错误

lendingPage.js:32 Uncaught TypeError: username.removeClass is not a function

请帮助我找出错误。

lendingPage.js

    $('#login_Modal').click(function (e){
        e.preventDefault();
        var username = $('#loginUsername').val();
        var password = $('#loginPassword').val();

            // Check if there is an entered value
    if(username.length>0) {
              // Remove the errors highlight
      username.removeClass('has-error').addClass('has-success');

    } else {
              // Add errors highlight
      username.removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();

    }

        $.ajax({
            url: "form_login_process.php",
            type: 'POST',
            data:{'Username':username,'Password':password},
            success: function (data)
            {
             if(data === "true")
             {
            }
            else if(data === "false")
            {
            }
           },
    });
});

模态

 <form role="form" method="post" id="login_Modal_checks">
  <div class="form-group has-error">
 <label for="username"><span class="glyphicon glyphicon-user">                       </span>Username</label>  
              <input type="text" class="form-control" name="loginUsername" id="loginUsername" placeholder="Enter username">
            </div>

<div class="form-group has-error">

<label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label>

<input type="password" class="form-control" name="loginPassword" id="loginPassword" placeholder="Enter password">
 <i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i>

            </div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
 </div>

<a id="login_Modal"  class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</a>

         </form>

Answer 1

变量用户名只有输入框中的值。

要改变课程，你想做下面的事情......

        if($("#loginUsername").val() === '') {
            $("#loginUsername").parent().addClass('has-error');
            $("#loginUsername").focus();
            errCount++;
        } else {
            $("#loginUsername").parent().removeClass('has-error').addClass('has-success');
            if(errCount > 0) {
                errCount--;
            }
        }

如果你想使用用户名变量，那么，使用

var username = $("#loginUsername");

然后您可以将username视为元素变量。要检查价值，您可以使用username.val()

并更改父类

$("#loginUsername").parent().removeClass('has-error').addClass('has-success');

另请注意，您需要使用 .parent 作为用户名的父元素具有该类，并且您想要更改它。

Bootstrap模态表单验证问题

1 个答案: