1

body {

    font-family: helvetica, sans-serif;
    font-size: 15px;
    margin: 6% 10% 10% 35%;
}

input {


    padding: 8px 0px 8px 8px;
    font-size 10px;
    width: 159px;
    border: 1px solid grey;

}


label {

    position: relative;
    top: 6px;
    float: left;
    width: 135px;
}

.center {


    margin: 0 auto;

}

.box-margin {

    margin: 6.5px;


}

#submit {

    height: 20px;
    width: 90px;
    margin-left: 20%;
    margin-top: 2%;
}


#missingthings {

    margin-left: -35px;
    margin-top: 10px;
    font-family: bold;
    color: red;

}

#errormessage {


    margin-left: -35px;
    margin-top: 10px;
    font-family: bold;

    color: blue;
}

#1 {

    font-size: 50px;


}

#success {

    display: none;
    color: green;

}

</style>

<body>

<div >

    <p id="success">login succesfully</p>

</div>

<div class="center">

  <div class="box-margin">

        <label for="email">Email</label>    

        <input type="text" name="email" id="email" placeholder="eg.youremail@gmail.com">

    </div>

</div>

<div class="center">

    <div class="box-margin">

        <label for="Confirm-email">Confirm Email</label>    

      <input type="text" name="Confirm-email" id="confirm-email" placeholder="eg.youremail@gmail.com">

    </div>

</div>

<div class="center">

    <div class="box-margin">

        <label for="Confirm-email">Password</label> 

        <input type="password" name="password" id="password" placeholder="eg. password123">

    </div>

</div>

<div class="center">

    <div class="box-margin">

        <label for="Confirm-email">Confirm Password</label> 

        <input type="password" name="password" id="password2" placeholder="eg. password123">

    </div>

</div>

<div class="center">

    <div class="box-margin">

        <label for="phone">Phone</label>

        <input type="text" name="phone" id="phone" placeholder="eg. +52 1 (442) 301 7934">

    </div>

</div>

<div class="center">

    <button id="submit" value="submite">Submit</button>

</div>


<div id="missingthings">




</div>

<div id="errormessage">




</div>

<script type="text/javascript">

function isEmail(email) {

    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    return regex.test(email);
}

    $("#submit").click(function() {

        var errorMessage = "";

        var missingThings = "";





        if ($("#email").val() == "") {

            missingThings += "<p> you missed the email</p>"

    }


        if ($("#confirm-email").val() == "") {

            missingThings += "<p> confirm email secction is empty</p>"

    }
        if (isEmail($("#email").val()) == false){

            errorMessage += "<p>Your email is no valid</p>"

        }else {

        if ($("#email").val() != $("#confirm-email").val()) {

            errorMessage += "<p>the  emails are not equal</p>"

        }}

        if ($("#phone").val() == "") {

            missingThings += "<p> phone is missing</p>"

        }else {

            if ($.isNumeric($("#phone").val() ) != false ) {

            } 

            else {

                errorMessage += "<p>the phone is not numeric</p> "

            }}



        if ($("#password").val() == "") {

            missingThings += "<p> password is missing</p>"

        }



        if ($("#password").val() == $("#password2").val()) {




        }else { 

            errorMessage += "<p>the passwords are no equal</p>"

        }

        if ($(errorMessage) != "") {

            errorMessage = "<p>wrong</p>" + errorMessage;

        }

        if ($(errorMessage) != "") {

            $("#errormessage").html(errorMessage)

        } else {


        if ()

            $("#errormessage").hide();

        })

        }


     })





</script>   
1
  • La instruccion IF que contiene la instruccion de .hide ¿Que valor estas comparando?
    – Alvarez
    el 19 ago. 2017 a las 4:36

1 respuesta 1

0

Es posible que la condición no se esté cumpliendo:

if ()

    $("#errormessage").hide();

 })

quizá $("#errormessage").hide(); sería lo ocurriría si no se cumplen ninguna de las anteriores condiciones, en ese caso if () sobra. Y si es que quieres comparar algo más la condición debe ir entre los paréntesis del if.

Otras cosas a tener en cuenta:

  • Que el DOM esté listo cuando tratas de ocultar el div
  • Que escuches el evento correcto para lanzar el bloque de comparaciones if.
  • Que la librería jQuery esté incluida en el documento antes de usar cualquier fragmento de código jQuery

Para asegurar que el DOM esté listo, encierra el código jQuery dentro de

$(function() 
{
   //Código
});

Verás que el div se oculta por diferentes métodos, al apretar los respectivos botones, pues en este caso se escuchan los eventos correctos.

$(function() 
{

  $( "#btnHide" ).click(function() 
  {
    $('#divHide').hide();
  });


  $( "#btnSlideUp" ).click(function() 
  {
    $('#divSlideup').slideUp();
  });

  $( "#btnFadeOut" ).click(function() 
  {
    $('#divFadeout').fadeOut();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divHide">
  <p>Este div se ocultará con hide</p>
</div>


<div id="divSlideup">
  <p>Este div se ocultará con slideUp</p>
</div>


<div id="divFadeout">
  <p>Este div se ocultará con fadeOut</p>
</div>


<button id="btnHide">hide</button>
<button id="btnSlideUp">slideUp</button>
<button id="btnFadeOut">fadeOut</button>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.