Question

我是html和javascript的新手。我的按钮点击似乎有问题。如果用户名/密码为空，则将输入框的边框设置为红色，然后让我再次填写它们。问题是，当输入框为空时，当我点击按钮时，输入框被设置为红色半秒，然后网页最终在index.html？不知道为什么我在谷歌浏览器中观看控制台并显示

login_button Clicked
index.js:34 username == null
index.js:41 password  == null
Navigated to file:////index.html?

按钮单击

$('#login_button').click(function () {
    console.log("login_button Clicked");
    var username = $('#login_username').val();
    var password = $('#login_password').val();

    if (username == "") {
        console.log("username == null");
        $('#login_username').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (password == "") {
        console.log("password  == null");
        $('#login_password').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (username && password) {
        console.log("Login");
    }
});

我在Chrome中得到这个例外： DOMException：无法在'Element'上执行'querySelectorAll'：'*，：x'不是有效的选择器。

Answer 1

$('#login_button').click(function (e) {
    e.preventDefault();

    console.log("login_button Clicked");
    var username = $('#login_username').val();
    var password = $('#login_password').val();

    if (username == "") {
        console.log("username == null");
        $('#login_username').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (password == "") {
        console.log("password  == null");
        $('#login_password').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (username && password) {
        console.log("Login");
    }
});

您应该只需捕获事件并阻止默认操作

Answer 2

在您的按钮中，您可能不会更改类型，因此默认情况下它会为您提交表单。您可以使用preventDefault函数阻止提交，也可以使用type属性

更改按钮的默认行为

type =“button”

Answer 3

你不是event.preventDefault所以当你点击链接时（我猜测SRC =＆＃34;＃＆＃34;或SRC =＆＃34; /＆＃34;）它将转到链接位置。

前两行应该是：

$('#login_button').click(function (e) { e.preventDefault();

Answer 4

添加return false或添加event.preventDefault();，以防止在数据为空或错误时提交表单。

查看两者之间的差异：event.preventDefault() vs. return false

if (username == "") {
        console.log("username == null");
        $('#login_username').css({
            "border": '#FF0000 1px solid'
        });
      return false;
 }

导航到“index.html？”按钮点击不设置元素

4 个答案: