can not hide a div with .hide (jQuery)

Question

can not hide a div with .hide (jQuery)

Navigation

#1 by (0 votes)

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="[email protected]">

    </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="[email protected]">

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

javascript jquery html css

asked by Sergio A Castañeda Venegas 19.08.2017 в 06:24

source

1 answer

MYSQL: ERROR 2027 (HY000): Malformed packet How to get the id of a select in angular 4

score 0 · Accepted Answer

It is possible that the condition is not being met:

if ()

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

 })

maybe $("#errormessage").hide(); would be what would happen if none of the above conditions are met, in that case if () surplus. And if you want to compare something else the condition must go between the parentheses of if .

Other things to keep in mind:

Let the DOM be ready when you try to hide the div
That you hear the correct event to launch the comparison block if .
That the jQuery library is included in the document before using any jQuery snippet

To ensure that the DOM is ready, enclose the jQuery code inside

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

You will see that the div is hidden by different methods, by pressing the respective buttons, because in this case the correct events are heard.

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