CODEWITHSUNDEEP
javascripthtml
Jcorretjer
Jcorretjer

Reputation: 497

Validating from a form

I've asked this before, but didn't really use real code so this time I will. I need to be able to validate, at least, one of the input boxes. If it's empty it says it's empty and it won't open the mail.php. If it's not empty it will open the mail.php and it should submit it's content so that in the php page it can be processed.

Here's what I got:

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

It's for a spanish client. My problem is that it does the validation, but it still does open the php page and submits it's content even if it returns false. Not adding css or what's in the php page cause it doesn't really mater. I just need help with this issue.

In my document it's a lot more organized, wish I could've done the same here.

Thanks.

Upvotes: 3

Views: 63

Answers (2)

A Paul
A Paul

Reputation: 8251

use onclick instead of onsubmit <input type="button" value="Submit" onclick='validation()'/>. 

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

Upvotes: 1

Bhushan
Bhushan

Reputation: 6181

Try this:

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

Note that I have put return in onsubmit.

Upvotes: 2

Related Questions