1

基于这个例子

<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;
}

由于单选按钮，验证我的错误。必须在“业务”中选择“类型”，并且必须在“餐饮”中选择“我感兴趣的请求”复选框，我才能将它们视为有效。

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

我该如何解决这些错误？

4

1 回答 1

0

一些问题：

<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/

希望这可以帮助。

于 2013-07-01T15:37:52.957 回答