提交表单时JS未定义错误

JS undefined error when form is submited

本文关键字：未定义 错误 JS 表单 提交      更新时间：2023-09-26

我有这样一个表单:

<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)，但令人惊讶的是，当任何条件为真时，我得到"未定义"粘贴到错误的一边。控制台日志什么也没说，我不知道我做错了什么。有谁能帮我一下吗?

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

msg = "Error/es: 'n";
不是

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

可以使用.join() 

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

你应该为你的表单指定一个名称和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>
相关文章：