使用jquery验证条件时显示警报

debugcn 发表于 Dev

王子

我正在处理表格。当没有输入字段为空时，将显示警报。发生错误时（提交了一个空字段），将一个类添加到输入中以在其上应用样式。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".form-register").submit(function (e) {

            e.preventDefault();

            if($(this).find('.error')){
                $(".error").animate({'margin-left': '0'});
                $(this).find('input').removeClass('error');
                $(this).find('select').removeClass('error');
            }

            var email = $(this).find('input[name="email"]').val();
            if(!email){
                $(this).find('input[name="email"]').addClass('error');
                alert('Email can not be empty');
            }

            var name = $(this).find('input[name="name"]').val();
            if(!name){
                $(this).find('input[name="name"]').addClass('error');
                alert('Name can not be empty');
            }

            if($(this).find('.error')){
                $(".error").animate({'margin-left': '15px'});
            }else{
                alert('No error has been detected.');
            }

        });
    });

</script>

<style>
    .form-register input.error {
        border:1px solid #F5192F;
        box-shadow:0 0 4px #F5192F;
    }
</style>

<form class="form-register" method="post" action="">
    <input name="email" type="text"/>
    <input name="name" type="text"/>
    <input type="submit"/>
</form>

我想在字段不为空但无法显示时显示警报。请帮助我解决此问题。谢谢

赫克托·巴博萨（Hector Barbossa）

if($(this).find('.error')) {即使表单中不存在具有类错误的元素，jQuery也将始终为true，jQuery将返回一个空数组。更改代码以if($(this).find('.error').length > 0){显示警报alert('No error has been detected.')。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。