Jump to content

JQuery Help

jamesjmann

By jamesjmann
in Javascript Help

 Share

Recommended Posts

jamesjmann Regular Member

jamesjmann

Posted
Posted

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?

Link to comment
https://forums.phpfreaks.com/topic/231969-jquery-help/
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/231969-jquery-help/#findComment-1193354
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/231969-jquery-help/#findComment-1193375
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.