I have a simple login form like below, with an attached jQuery script. I'm trying to make some simple client-side form validation using jQuery. I can't seem to get the blur event to fire, however. I can't think of what I'm doing wrong, I've tried using '.on('blur', fn(){})' but that doesn't work either. Please help!
Here's my HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DMIT 222 - Catalogue Project: Admin Login</title>
<link rel="stylesheet" type="text/css" href="../styles/divs.css" />
<link rel="stylesheet" type="text/css" href="../styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="../styles/tags.css" />
<link rel="stylesheet" type="text/css" href="../styles/tables.css" />
<link rel="stylesheet" type="text/css" href="styles/forms.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../scripts/loginFormValidation.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Ship Catalogue</h1>
</header>
<div id="mainContent">
<form id="LoginForm" name="LoginForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="FormRow"><label for="Username">Username:</label><input type="text" name="Username" id="Username" /><p id="userErrors"><?php echo $userErrors; ?></p></div>
<div class="FormRow"><label for="Password">Password:</label><input type="password" name="Password" id="Password" /><p id="passwordErrors"><?php echo $passwordErrors; ?></p></div>
<div class="FormRow"><input type="submit" name="Submit" value="Login!" /></div>
</form>
</div>
<footer>
Site Developed by Logic & Design
</footer>
</div>
</body>
</html>
And here's the loginFormValidation.js script:
$("#Username").blur(function(e){
alert();
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
$("#Password").blur(function(e){
if ($("#Password").val() == "") {
$("#passwordErrors").text("Password must be entered!");
}
});
You need to wrap your events inside jQuery's document.ready function:
$(document).ready(function() {
$("#Username").blur(function(e){
alert();
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
$("#Password").blur(function(e){
if ($("#Password").val() == "") {
$("#passwordErrors").text("Password must be entered!");
}
});
});
Either add your jquery blur code inside
$(document).ready(function() { ...// your blur code here }
OR
at bottom of your page above closing body tag like:
<script type="text/javascript">
//your blur code
</script>
</body>
It works if you add some content to alert. The JS engine threw an error because the alert function was being called with no parameters. I would also recommend binding the event with document.ready()
$(document).ready(function(){
$("#Username").blur(function(e){
alert("something");
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
});
Example: http://jsfiddle.net/PfnGv/
Related
Suppose a function trigger on Click button
<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
<title>getElementsByTagName.html</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
<script type="text/javascript">
//<![CDATA[
function getData(){
inputTag=document.getElementsByTagName("input");
divOutput=document.getElementById("output");
alert(inputTag.length);//length of input Tag
for(i=0;i<inputTag.length-1;i++){
if((inputTag[i].value=="") || (inputTag[i+1].value=="")){
alert("Please Enter Value");
}else{
a=inputTag[i].value;
b=inputTag[i+1].value;
}
}
$("#output").css("display","block");
divOutput.innerHTML="<strong>"+a+"<\/strong>";
divOutput.innerHTML+="<br\/>"+"<strong>"+b+"<\/strong>";
}//end function
//]]>
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Example getElementsByTagName</legend>
<label>Name</label>
<input type="text" id="txtName"/>
<label for="txtName">Password</label>
<input type="password" id="txtPassword"/>
<button type="button" onclick="getData()">
Submit
</button>
</fieldset>
<div id="output">
</div>
</form>
</body>
</html>
Is this right?? $("#output").css("display","block");
This code not working i.e. after click on submit button it doesn't show the output div?
Add this code:
$( "#output" ).on( "click", function() {
this.css("display", "block");
});
I'm using Abide to run validation on a form, which is working fine. However I'm trouble performing an action if the form is valid or invalid.
HTML:
<form role="form" id="form_search_extended" name="form_search_extended" data-abide="ajax" novalidate>
<input name="postalCode" type="text" value="{{$data['postalCode']['value']}}" placeholder="ZIP/Postal Code" required maxlength="10">
<button type="submit" value="Submit">Submit</button>
</form>
Javascript:
$('#form_search_extended')
.on('invalid.fndtn.abide', function () {
callFunctionOnValid();
console.log('invalid!');
})
.on('valid.fndtn.abide', function () {
console.log('valid!');
});
var form = document.getElementById('form_search_extended');
form.onsubmit = function(e) {
e.preventDefault();
console.log('form submitted');
};
The code inside the valid or invalid listeners weren't being run.
I don't understand why this isn't working. Is the event listener for valid.fndtn.abide not being fired? Abide is working because the validation for the fields is showing up.
Thanks.
You need to initialize the script.
Add
<script>
$(document).foundation();
</script>
before the closing body tag
$('#form_search_extended')
.on('valid.fndtn.abide', function(e, el) {
callFunctionOnValid();
console.log('invalid!');
})
.on('invalid.fndtn.abide', function(e, el) {
console.log(e.target, 'valid!');
})
.on("submit", function(ev) {
ev.preventDefault();
console.log("Submitted");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form data-abide novalidate role="form" id="form_search_extended" name="form_search_extended">
<label>Number required
<input name="postalCode" type="text" placeholder="ZIP/Postal Code" required pattern="number" maxlength="10">
</label>
<small class="error">You need a number.</small>
<button type="submit" value="Submit">Submit</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/plugins/foundation.abide.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
For anyone else having this problem, Lea Fox's answer wasn't working for me as I had already initialized Foundation. What did work was creating a new Abide instance right before the form JS code. In this case:
const $form = $('#form_search_extended');
// Create new Abide instance
new Foundation.Abide($form);
$form
.on('valid.fndtn.abide', function(e, el) {
callFunctionOnValid();
console.log('invalid!');
})
.on('invalid.fndtn.abide', function(e, el) {
console.log(e.target, 'valid!');
})
.on("submit", function(ev) {
ev.preventDefault();
console.log("Submitted");
});
Now the valid.fndtn.abide and invalid.fndtn.abide triggers are being called. I am not sure why this is required, it may have something to do with ES6 modules.
The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
</script>
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
CSS File
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
Pretty sure you haven't included jQuery. The jQuery library is necessary for the script you want to run. You can download a copy of jQuery from here or you can use a copy hosted from Google. jQuery has to be included before the code you want to run.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
<!-- INCLUDE JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
}):
</script>
</body>
</html>
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
You can try like:
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
It seems that are your not including the jQuery library in the head of the html file.
Include the jquery library (it should be before your script):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready. You can do this by putting your function into:
$(document).ready(function() {
// your code here
});
So your script will end up looking like:
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
I'm trying to get text from a text input, append it to a URL, and go to that URL, using Javascript. But when I submit, it appears to just reload the page.
http://jsfiddle.net/E3vv6/
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
}
</script>
</head>
<body>
<form onsubmit="loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>
You need to use event.preventDefault() in the submit function.
Live Demo (click).
Further, inline js (onsubmit in your html) is bad practice for a lot of reasons. Here are some: https://www.google.com/search?q=Why+is+inline+js+bad%3F
If would be better to get a reference to the form with javascript and attach the event listener.
<form id="myForm">
<input type="submit" value="Submit">
</form>
JavaScript:
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
myFunction();
e.preventDefault();
});
function myFunction() {
console.log('submitted!');
}
You need to prevent the default behaviour of the onsubmit.
You could use return false:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
return false;
}
</script>
</head>
<body>
<form onsubmit="return loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>