Question

基于此示例

<html>
    <head>
        <title>jQuery: Check if Textarea is empty 3</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    </head>

    <body>
        <form name="form1" method="post" action="">
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments"></textarea>
        </form>
        <input name="check" id="check" type="submit" value="OK" />
        <input type="reset" value="Cancelar" onclick="$('form')[0].reset() "/>

        <script type="text/javascript">
            $('#check').click(function() {
                if ( $('#comments').val() == '' )
                {
                    alert('Empty!!!');
                }
                else
                {
                    alert('Contains: ' + $('#comments').val() );
                }
            });
        </script>
    </body>
</html>

我做了这个页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Formulario demo 3</title>
        <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript"  src="js/validador.js"> </script>
        <link rel="stylesheet" type="text/css" href="css/estilo.css"></link>
    </head>
    <body>
        <div class="inicio">
            <div class="div_formulario">
                <form name="formulario" id="formulario" class="formulario" action="" method="post">
                <ul>
                    <li>Nombre o razón social: <span>(*)</span></li>
                    <li><input name="nombre" id="nombre" type="text"></li>
                    <li>E-Mail <span>(*)</span></li>
                    <li><input name="email" id="email" type="text"></li>
                    <li>Tipo de evento: <span>(*)</span></li>
                    <li><input name="evento" id="evento" value="empresarial" type="radio"> Empresarial
                    <input name="evento" id="evento" value="empresarial" type="radio"> Particular</li>
                    <li>Me interesa consultar sobre:<span>(*)</span> </li>
                    <li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="catering"/>
                        Catering    </li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="salones"/>
                        Salones</li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="musica"/>
                        M&uacute;sica </li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="fotografia"/>
                        Fotograf&iacute;a     </li>
                        <li><input type="checkbox" name="consulta" id="consulta"  value="decoracion"/>
                        Decoraci&oacute;n </li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="dj"/>
                        DJ </li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="show"/>
                        Show </li>
                        <li><input type="checkbox" name="consulta" id="consulta" value="videos"/>
                        Videos </li>
                    </li>
                    <li> Zona donde desea el evento:<span>(*)</span></li>
                        <li>
                        <select name="ubicacion" id="ubicacion">
                            <option value="" selected="selected">-</option>
                            <option value="caba">CABA</option>
                            <option value="gba">GBA</option>
                            <option value="fueradegba">Fuera de GBA, Bs As</option>
                            <option value="interior">Interior</option>
                        </select>
                    </li>
                    <label for="comments">Comments:</label>
                        <textarea name="comments" id="comments">
                        </textarea>
                    </form>
                    <li class="botones"><input name="check" id="check" type="submit" value="OK" /></li>
                    <li class="botones"><input type="reset" value="Cancelar" onclick="$('form')[0].reset()"/></li>
                </ul>
            </div>
        </div>
    </body>
</html>

档案validador.js

$(document).ready(function(){
    $("#formulario").submit(function () {
        if($("#nombre").val().length < 4) {
            alert("El nombre debe tener más de 3 caracteres");
            return false;
        }
        if($("#email").val().length < 1) {
            alert("La dirección e-mail es obligatoria");
            return false;
        }
        if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {
            alert("La dirección parece incorrecta");
            return false;
        }
        if($("#evento").is(':checked')) { } else {
            alert("Indique el tipo de evento");
            return false;
        }
        if($("#consulta").is(':checked')) { } else {
            alert("Indique al menos un item");
            return false;
        }
        if($("#ubicacion option:selected").val() == "") {
            alert("La zona es obligatoria");
            return false;
        }
            $('#check').click(function() {
                if ( $('#comments').val() == '' )
                {
                alert('Empty!!!');
                }
                else
                {
                alert('Contains: ' + $('#comments').val() );
                }
            });
        return false;
    });
});

文件estilo.css

.html, body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}

.inicio {
    width:600px;
    height:100%;
    padding:0px;
    margin:0px auto 0px auto;
}

.formulario ul {
    float:left;
    width:100%;
    padding:0px;
    margin:0px;
    padding-top:20px;
    list-style-type:none;
}

.formulario ul li {
    float:left;
    width:50%;
    height:25px;
    line-height:25px;
    padding:0px;
    margin:0px;
    list-style-type:none;
    padding-top:5px;
}

.formulario ul li.botones {
    text-align:center;
}

由于单选按钮验证我有错误。必须在“业务”和复选框中选择“类型” “我感兴趣的请求”必须在“Catering”中才能将其视为有效。

我还验证了错误的消息textarea：如果为空，它应该显示消息“Empty！”，但似乎textarea返回空内容“Contains”。

我如何解决这些错误？

Answer 1

一些问题：

<input name="evento" id="evento" value="empresarial" type="radio"> Empresarial 
<input name="evento" id="evento" value="empresarial" type="radio"> Particular

id在页面上必须是唯一的。将id属性更改为evento_empresarial和evento_particular。此外，每个无线电选项都具有相同的值。我认为第二个value应该是particular。

此外，请为每个字段添加label元素，并确保标签的for属性是其关联字段的ID。例如，在上面的代码中，您应该具有以下内容：

<input name="evento" id="evento_empresarial" value="empresarial" type="radio"> <label for="evento_empresarial">Empresarial</label> 
<input name="evento" id="evento_particular" value="particular" type="radio"> <label for="evento_particular">Particular</label>

这不仅在语义上是正确的，而且通过添加具有适当for属性的标签，您允许用户单击整个标签以选择该选项，而不是仅能够单击小小的无线电按钮控制。您也应该为所有复选框执行此操作，并在您使用这些复选框时更正这些复选框上的所有ID。：）

就您报告的问题而言（textarea报告“包含：”当您预期“空”时），textarea元素包含空格，因为您已在标记中写入：

虽然你当然可以把textarea写成不包含空格，但一般来说，你应该在验证之前总是从输入中修剪空格，除非它依赖于空格（如代码示例中所示）。在验证功能上，尝试：

if ( $('#comments').val().trim() == '' )

请在此处查看更新的jsfiddle：http://jsfiddle.net/7GwyW/1/

希望这有帮助。

jQuery中的验证问题

档案validador.js

文件estilo.css

1 个答案: