Question

我有这样的表格：

<form onsubmit="return validarIDC()">
                <div class="labelBox">
                    <div>
                        <label>Destinatario:</label>
                        <select name="destinatario">
                            <option value="hombre">Sr.</option>
                            <option value="mujer">Sra.</option>
                        </select>
                    </div>
                    <div>
                        <label>Apellido y<br>nombre:</label>
                        <input type="text" id="nombre"> *
                    </div>
                    <div id="ubicarCampo">
                        <label>Razón Social:</label>
                        <input type="text" name="razon">
                    </div>
                    <div>
                        <label>Email:</label>
                        <input type="email" name="email"> *
                    </div>
                    <div>
                        <label>Teléfono:</label>
                        <input type="text" name="telefono"> *
                    </div>
                    <div>
                        <label>Celular:</label>
                        <input type="text" name="celular">
                    </div>
                    <div>
                        <label>Via de Contacto:</label>
                        <select name="via">
                            <option value="opc1">E-mail</option>
                            <option value="opc2">Telefono</option>
                            <option value="opc3">Correo postal</option>
                        </select>
                    </div>
                    <div>
                        <label>Comentarios:</label>
                        <textarea max="300"></textarea>
                    </div>
                    <input name="submit" type="submit" value="Enviar">
                </div>
            </form>
            <script type="text/javascript" src="script.js"></script>

并且我已经完成了一个函数来验证来自输入的所有数据，它完美地解决了一个错误，代码之后的更多细节，这里是JS：

function validarIDC() {
    var errores = [];  
    var er = /^[\w]+$/;

    if (document.contactForm.nombre.value == "" || document.contactForm.nombre.value == null) {
        errores.push("El nombre es obligatorio.");
    }
    else if (!er.test(document.contactForm.nombre.value)) {
        errores.push("El nombre contiene caracteres no validos o      Espacios.");
    }
    if (document.contactForm.telefono.value == "") {
        errores.push("Debe ingresar un telefono")
    }
    else if (isNaN(document.contactForm.telefono.value)) {
             errores.push("El campo telefono contiene caracteres no validos.");
    }
    if (document.contactForm.email.value == "") {
        errores.push("Debe especificar una dirección de Email.");
    }
    if (document.contactForm.celular.value !== "" &&                                                                                                                                                                                                                                                                 isNaN(document.contactForm.celular.value)) {
        errores.push("El campo celular contiene caracteres no validos.");
    }
    if (errores.length > 0) {
        msg = alert("Error/es: \n");
        for (var i = 0; i < errores.length; i++) {
            msg += errores[i] + "\n";
        }
        alert(msg);
        return false;    
    }
    document.contactForm.submit.disable = true;
    alert("Los datos han sido enviados exitosamente!");
    return true;
}

因此，当我提交它时会弹出警报（msg），但令人惊讶的是，当任何条件真实时我得到“未定义”时都会出现错误...控制台日志没有说什么我不喜欢我不知道我做错了什么..请有人帮我这个吗？

Answer 1

您需要初始化变量，因为alert()不会返回任何msg undefined。

msg = "Error/es: \n";

而不是

msg = alert("Error/es: \n");

您可以使用.join()

var msg = "Error/es: \n" + errores.join("\n");

Answer 2

您应该为表单指定名称和ID ...

这是一个有效的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form onsubmit="return validarIDC()" name="contactForm" id="contactForm">
                <div class="labelBox">
                    <div>
                        <label>Destinatario:</label>
                        <select name="destinatario">
                            <option value="hombre">Sr.</option>
                            <option value="mujer">Sra.</option>
                        </select>
                    </div>
                    <div>
                        <label>Apellido y<br>nombre:</label>
                        <input type="text" id="nombre" name="nombre"> *
                    </div>
                    <div id="ubicarCampo">
                        <label>Razón Social:</label>
                        <input type="text" name="razon">
                    </div>
                    <div>
                        <label>Email:</label>
                        <input type="email" name="email"> *
                    </div>
                    <div>
                        <label>Teléfono:</label>
                        <input type="text" name="telefono"> *
                    </div>
                    <div>
                        <label>Celular:</label>
                        <input type="text" name="celular">
                    </div>
                    <div>
                        <label>Via de Contacto:</label>
                        <select name="via">
                            <option value="opc1">E-mail</option>
                            <option value="opc2">Telefono</option>
                            <option value="opc3">Correo postal</option>
                        </select>
                    </div>
                    <div>
                        <label>Comentarios:</label>
                        <textarea max="300"></textarea>
                    </div>
                    <input name="submit" type="submit" value="Enviar">
                </div>
            </form>
<script type="text/javascript">
    function validarIDC() {
    var errores = [];  
    var er = /^[\w]+$/;

    if (document.contactForm.nombre.value == "" || document.contactForm.nombre.value == null) {
        errores.push("El nombre es obligatorio.");
    }
    else if (!er.test(document.contactForm.nombre.value)) {
        errores.push("El nombre contiene caracteres no validos o      Espacios.");
    }
    if (document.contactForm.telefono.value == "") {
        errores.push("Debe ingresar un telefono")
    }
    else if (isNaN(document.contactForm.telefono.value)) {
             errores.push("El campo telefono contiene caracteres no validos.");
    }
    if (document.contactForm.email.value == "") {
        errores.push("Debe especificar una dirección de Email.");
    }
    if (document.contactForm.celular.value !== "" &&                                                                                                                                                                                                                                                                 isNaN(document.contactForm.celular.value)) {
        errores.push("El campo celular contiene caracteres no validos.");
    }
    if (errores.length > 0) {
        msg = alert("Error/es: \n");
        for (var i = 0; i < errores.length; i++) {
            msg += errores[i] + "\n";
        }
        alert(msg);
        return false;    
    }
    document.contactForm.submit.disable = true;
    alert("Los datos han sido enviados exitosamente!");
    return true;
}
</script>
</body>
</html>

提交表单时JS未定义错误

2 个答案: