Question

jQuery Preventdefault() 函数不起作用

2012-06-05

1711

javascript jquery jquery-ui jquery-events

这是我的 Jsfiddle 。

实际上，我正在尝试在提交之前验证文本字段。如果文本字段为空，我想显示 errormsg_box ，如果不是，则提交表单，但在这里它不起作用这是我的脚本：

$("form").submit(function(event) {

    var text_val = $('#emailid').val();
    alert(text_val);
    if (text_val != ' ') {
        $('.errormsg_box').show();
        return false;
        event.preventdefault();
    }
    else if (text_val != '') {
        $('.errormsg_box').hide();
        return true;
    }
});

Answer 1

if ($.trim(text_val) === "") {
    return false;
    // Or
    event.preventDefault(); // event.preventdefault()
                            // javascript is case sensitive.
}

完整代码:

$("form").submit(function(event) {
    var text_val = $('#emailid').val();

    if ($.trim(text_val) === "") {
        $('.errormsg_box').show();
        return false;
    }
    else 
        $('.errormsg_box').hide();
});

现场演示

如果您想验证文本是否为有效的电子邮件地址:

var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test($.trim(text_val)))
    ... Error

现场演示

Answer 2

$("form").submit(function(event) {    
    var text_val = $.trim($('#emailid').val()); // $.trim() for remove space
    if (!text_val) { // check for empty
        $('.errormsg_box').show();
        return false;
        //or
        //event.preventDefault();
    }
});

演示

Answer 3

编辑这可能是一个更好的解决方案：

<input id="emailid" class="required email" />

并使用 jQuery 验证插件： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

$("#form").validate();

因此像这样：

$(document).ready(function () {
    $("#form").submit(function () {
        var container = $('errormsg_box');

        var validator = $("#form").validate({
            errorContainer: container,
            errorLabelContainer: $("ul", container),
            ignore: ":not(:visible)", 
            wrapper: 'li',
            rules: {
                emailid: { required: true, email: true }
            },
            messages: {
                emailid: "The e-mailaddress is invalid!"
            }
        });
        if ($("#form").valid()) {
            alert('ok nice!');
        }      
    });
});