Javascript 从表单验证_Javascript_Html

Javascript 从表单验证

javascript html

Javascript 从表单验证,javascript,html,Javascript,Html,我以前问过这个问题，但没有真正使用真正的代码，所以这次我会问。我需要能够验证至少一个输入框。如果它是空的，它会说它是空的，并且不会打开mail.php。如果它不是空的，它将打开mail.php，它应该提交它的内容，以便在php页面中处理它以下是我得到的： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="inscripcion-style.css"> <

我以前问过这个问题，但没有真正使用真正的代码，所以这次我会问。我需要能够验证至少一个输入框。如果它是空的，它会说它是空的，并且不会打开mail.php。如果它不是空的，它将打开mail.php，它应该提交它的内容，以便在php页面中处理它

以下是我得到的：

<!DOCTYPE html>
 <html>
 <head>
    <link rel="stylesheet" href="inscripcion-style.css">
    <title>Inscripci&#243;n</title>
    <link rel="icon" href="LOGO.ico" type="image/x-icon">
    <script>
        function validation() {
            var x = document.getElementById("equipo").value;
            if (document.getElementById("equipo").value == "" || document.getElementById("equipo").value == " ") {
                alert("vacio");
                return false;
            } else {
                alert("no vacio");
                return true;
            }
        }
    </script>
</head>
<body>
    <div class="header">
         <h1>
            <font  color = "#015BA5">       
            Inscripci&#243;n de Equipo
            </font>
        </h1>
    </div>
    <form name="myForm" id="myForm" action="mail.php" method="POST" onsubmit="validation()">
        <div>
            <div class="aBox" id="num1">
                <div class="label" style="font-size: 15pt;">Nombre del Equipo</div>
                <div class="formParent">
                    <input type="text" style=" width: 200px;  font-size: 15pt;" name="equipo" id="equipo">
                </div>
            </div>
            <div class="aBox" id="num1">
                <div class="label" style="font-size: 15pt;">Numero de Integrantes</div>
                <div class="formParent">
                    <select style=" width: 200px; font-size: 15pt;" name="integrantes">
                        <option value=1>1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                        <option value=4>4</option>
                        <option value=5>5</option>
                        <option value=6>6</option>
                        <option value=7>7</option>
                        <option value=8>8</option>
                        <option value=9>9</option>
                        <option value=1 0>10</option>
                    </select>
                </div>
            </div>
            <div id="num1">
                <div class="label" style="font-size: 15pt;">Universidad</div>
                <div class="formParent">
                    <select style=" width: 200px; font-size: 15pt;" name="Uni">
                        <option value=U met>UMET</option>
                        <option value=I nter-Metro>Inter-Metro</option>
                    </select>
                </div>
            </div>
        </div>
        <div>
             <h1 class="lbl1">

                <font  color = "#015BA5">       

                Contacto 1

                </font>

            </h1>

            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Nombre</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Primer apellido</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Segundo apellido</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Email</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Tel&#233;fono</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel">
                </div>
            </div>
        </div>
        <div>
             <h1 class="lbl1">

                <font  color = "#015BA5">       

                Contacto 2

                </font>

            </h1>

            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Nombre</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre2">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Primer apellido</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido2">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Segundo apellido</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido2">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Email</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail2">
                </div>
            </div>
            <div class="aBox2" id="num1">
                <div class="label" style="font-size: 15pt;">Tel&#233;fono</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel2">
                </div>
            </div>
        </div>
        <div>
             <h1 class="lbl1">

                <font  color = "#015BA5">       

                Profesor

                </font>

            </h1>

            <div class="aBox3" id="num1">
                <div class="label" style="font-size: 15pt;">Nombre</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre3">
                </div>
            </div>
            <div class="aBox3" id="num1">
                <div class="label" style="font-size: 15pt;">Primer apellido</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido3">
                </div>
            </div>
            <div class="aBox3" id="num1">
                <div class="label" style="font-size: 15pt;">Segundo apellido</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido3">
                </div>
            </div>
            <div class="aBox3" id="num1">
                <div class="label" style="font-size: 15pt;">Email</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail3">
                </div>
            </div>
            <div class="aBox3" id="num1">
                <div class="label" style="font-size: 15pt;">Tel&#233;fono</div>
                <div class="formParent">
                    <input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel3">
                </div>
            </div>
        </div>
        <div>
            <input type="submit" value="Enviar" class="enviarBtn">
        </div>
    </form>
</body>


Inscripció；N
函数验证（）{
var x=document.getElementById（“equipo”）.value；
if（document.getElementById（“equipo”）.value==“document.getElementById（“equipo”）.value==”）{
警惕（“真空”）；
返回false；
}否则{
警惕（“无真空”）；
返回true；
}
}
Inscripció；设备
设备名称
积分数
1.
2.
3.
4.
5.
6.
7.
8.
9
10
大学
乌梅特
地铁间
联系人1
名义
阿佩利多引物
塞贡多阿佩利多
电子邮件
电话é；福诺
触点2
名义
阿佩利多引物
塞贡多阿佩利多
电子邮件
电话é；福诺
教授
名义
阿佩利多引物
塞贡多阿佩利多
电子邮件
电话é；福诺

这是给一个西班牙客户的。我的问题是它进行了验证，但它仍然打开php页面并提交其内容，即使返回false也是如此。不添加css或php页面中的内容，因为这并不重要。我只是需要帮助解决这个问题

在我的文档中，它更有条理，但愿我在这里也能做到

谢谢。

试试这个：

<form name="myForm" id="myForm" action="mail.php" method="POST" onsubmit="return validation();">

请注意，我已将

return

放在

onsubmit

中，使用onclick而不是onsubmit

<script type="text/javascript">
    function validation() {
        var x = document.getElementById('test').value;
       if( document.getElementById("equipo").value == "" || document.getElementById("equipo").value == " " ) 
            { 
              alert("vacio");
        }
        else
            document.form.submit();
    }
</script>


函数验证（）{
var x=document.getElementById（'test'）。值；
if（document.getElementById（“equipo”）.value==“document.getElementById（“equipo”）.value==”）
{ 
警惕（“真空”）；
}
其他的
document.form.submit（）；
}

退货和不退货有什么区别？哦，该死！成功了！你不知道我有多感激你所做的。真是个减压器！伙计。。。谢谢我做了3-4个小时的研究，不停地试图解决这个问题。@chelo666

return

只有在validation（）函数返回true时才会提交表单。如果返回false，则不会提交表单。