JQuery Help

jamesjmann · March 28, 2011

Hey, I'm trying to make a simple form using jquery for validation and whatnot, and I can't seem to get it to work.

Here's my code:

<html>
<head>

<script language="javascript" src="jq/jquery-1.5.1.min.js"></script>

<style>
.box,
button { 
margin:5px 10px 5px 0; 
}

p {
line-height: 10px;
}

body {
line-height: 15px;
}

.box { 
color: #FF0000;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFD9DA;
width: 250px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
line-height: 15px;
}
.box2 {
color: #00CC00;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CEFFDB;
width: 250px;
padding: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

</style>

</head>
<body>
<form onSubmit="return check_name();" method="post" action="?hello=man">
<p>Name: <input type="text" id="btn1" value="" size="50" onKeyDown="check_name();"/></p>
<p><div id="box1" class="box"><img src="images/icons/x.png" width="17" height="17" style="float: left; margin-right: 5px;"/>You did not enter a name!</div></p>
</form>

<script>
function check_name() {
if ($("#btn1").length == 0) {
	$("#box1").fadeIn(500);
} else {
	if ($("#btn1").length != 0) {
		$("#box1").fadeOut(500);
	}
}
}

</script>
</body>
</html>

Now the problem is, I can't get the error message to be hidden initially.

The second is, when you type something in the field, it goes away, but when you backspace everything to where it's empty, it doesn't redisplay the error message like it's supposed to.

Anyone know how to fix this?

cssfreakie · March 28, 2011

your code is missing some stuff which is vital

your image is missing an alt=" " attribute (1 time)
Your <style> tag is missing a type=" " attribute (1 time)
Your <script> tag is missing a type=" " attribute (3 times)

try the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <title>JQUERY</title>
<style type="text/css">
.box,
button {
margin:5px 10px 5px 0;
}

p {
line-height: 10px;
}

body {
line-height: 15px;
}

.box {
color: #FF0000;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFD9DA;
width: 250px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
line-height: 15px;
}
.box2 {
color: #00CC00;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CEFFDB;
width: 250px;
padding: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

</style>
    </head>
    <body>
         <form onSubmit="return check_name();" method="post" action="?hello=man">
            <p>Name: <input type="text" id="btn1" value="" size="50" onKeyDown="check_name();"/></p>
            <p><div id="box1" class="box"><img src="images/icons/x.png" alt="" width="17" height="17" style="float: left; margin-right: 5px;"/>You did not enter a name!</div></p>
        </form>

    <script type="text/javascript">
        function check_name() {
                if ($("#btn1").length == 0) {
                        $("#box1").fadeIn(500);
                } else {
                        if ($("#btn1").length != 0) {
                                $("#box1").fadeOut(500);
                        }
                }
        }
    </script>
    </body>
</html>

KevinM1 · March 28, 2011

A couple things:

Since you're using the function during the submit event, you need it to return false if the error pops up. Otherwise, form submission will continue regardless of the error.

Second, tie the function to the onkeyup event. Why? onkeydown fires when the button is pressed. onkeyup fires when the button is released. Your input isn't empty until after backspace is pressed.

Finally, use unobtrusive JavaScript. There's no reason to have ANY JavaScript code written inline within your elements, especially if you're using jQuery.

Try the following (be sure to read the two JavaScript comments I wrote):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <title>JQUERY</title>
<style type="text/css">
.box,
button {
margin:5px 10px 5px 0;
}

p {
line-height: 10px;
}

body {
line-height: 15px;
}

.box {
color: #FF0000;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFD9DA;
width: 250px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
line-height: 15px;
}
.box2 {
color: #00CC00;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CEFFDB;
width: 250px;
padding: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}

</style>
    </head>
    <body>
         <form id="form" method="post" action="?hello=man">
            <p>Name: <input type="text" id="btn1" value="" size="50" /></p>
            <p><div id="box1" class="box"><img src="images/icons/x.png" alt="" width="17" height="17" style="float: left; margin-right: 5px;"/>You did not enter a name!</div></p>
        </form>

    <script type="text/javascript">
        $("#form").submit(check_name); // you may need to put quotes around check_name.  DO NOT put parentheses at the end

        $("#btn1").keyup(check_name); // ditto

        function check_name() {
                if ($("#btn1").length == 0) {
                        $("#box1").fadeIn(500);
                        return false;
                } else {
                        $("#box1").fadeOut(500);
                        return true;
                }
        }
    </script>
    </body>
</html>

Sign In

JQuery Help

Recommended Posts

jamesjmann

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information