I get an error like this:
Uncaught TypeError: Cannot read property 'form' of undefined
Firebug says this line is the culprit:
if($("emailPost2").valid())
Here's all my jQuery code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("emailPost2").validate({
rules: {
emailAddress: {
required: true,
email: true
}
}
});
$('#zonePlus').click(function() {
$('#zoneNotif').submit();
});
$('#searchPost').submit(function(event) {
if ($(this).find('#searchBox').val() == '') {
event.preventDefault();
}
});
$("#searchBox").autocomplete({
source: 'php/searchAC.php'
});
$("button, input:submit, input:button, a#jql, input:radio").button();
$('#emailJQButton').live('click',function() {
$("#emailModal").dialog('open');
});
$('#eb1').live('click',function() {
$('#emailPost').submit();
$("#emailModal").dialog('close');
});
$('#eb2').live('click',function() {
if($("emailPost2").valid())
{
$('#emailPost2').submit();
$("#emailModal").dialog('close');
}
});
});
</script>
valid() should return true if it is valid, but I just get the error I mentioned above instead of any results.
Edit: Here's the HTML code for the form:
<div id="emailModal">
<form action="php/emailPost.php" method="POST" class="inline" id="emailPost2">
<label name="error"></label>
<input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;">
<input type="button" value="Email" id="eb2"/>
<input type="hidden" name="passedCoupID" value="1"/>
</form>
</div>
Looks like the problem is simply that you forgot the # in the id selector:
$("#emailPost2").valid()
(rather than the current $("emailPost2").valid())
Assuming
form id="emailPost2"
you need
if($("#emailPost2").valid())
I wanted to BOLD the # but was not allowed inside the brackets, hence I was 15 seconds slower :(
Related
I want to see if I can test form field validation using mocha & chai.
I have the following files:
./src/index.html:
<!doctype html>
<html>
<head>
<title>TDD Project</title>
<style>
#container {width: 600px; max-width: 100%; margin: 1em auto;}
</style>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
</head>
<body>
<div id="container">
<form>
<input type="text" id="text" placeholder="enter some text" required maxlength="10" pattern="^[a-z,A-Z]{1,10}$"><br />
<input type="text" id="number" placeholder="enter a number" required maxlength="10" pattern="\d{10}"><br />
<input type="submit">
</form>
</div>
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<script src="../test/test2.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
./test/test.js:
var assert = require("chai").assert;
function FormController() {
function isValidField(fieldID){
field = document.getElementById(fieldID);
return(field.checkValidity() = true ? true : false);
}
return {
isValidField
}
}
describe("Simple assert", function() {
it("foo != bar", function() {
assert('foo' != 'bar', 'foo is not bar');
});
it('should return true if field is valid', function(){
var isValidText = FormController.isValidField(text);
var isValidNumber = FormController.isValidField(number);
assert.equal(isValidText, true);
assert.equal(isValidNumber, true);
});
})
I have run the commands
> cd test
> browserify test.js > test2.js
I receive the error:
Error: Parsing file /Users/user/Documents/Projects/Contact_Form/test/test.js: Assigning to rvalue (6:15)
The problem appears to be with field.checkValidity() but I don't understand why.
Is it because the file test.js cannot access the DOM?
checkValidity() is a "HTML5 constraint validation API" discussed on this page.
Help appreciated.
From this answer:
You get rvalue error, when you use = instead of == in a condition checking block.
I am trying to validate a simple form. But I keep getting this error
Uncaught TypeError: $(...).validate is not a function
Here is my html file with form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cohorts</title>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="trunk/dev/validation.js"></script>
<form id="register-form" class="form-horizontal" name="form" ng-submit="addCohort()">
<div class="form-group">
<label class="control-label col-xs-3">Name:</label>
<input name="email" placeholder="Email Address" type="text" ng-model="formCohort.firstname">
<input class = "btn-btn-primary" id="submit-button" type="submit" value="Sigin up">
</div>
</form>
</body>
</html>
Here is my validation.
$(function () {
$("#register-form").validate({
rules:{
email:{
required: true,
email: true
}
}
});
});
Here is the error in my console:
What am I doing wrong?
Thank you!
You should first include the jQuery library
and than your validate plugin
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="trunk/dev/validation.js"></script>
P.S: make sure you have only one validate plugin!
Additionally, I'd suggest you to include your <script> tags right before the closing </body> tag.
<form id="register-form">
<input name="email" placeholder="Email Address" type="text">
<input type="submit" value="Sigin up">
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script>
jQuery(function($) {
$("#register-form").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>
I have implemented some validations to a simple login page and applied some jQuery validations on button click but the code isn't working. I tried checking console but it was not giving me any errors. Please see the code for your reference:
Could you guys tell me the error?
<!doctype html>
<html>
<head>
<title>Login Page</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate"></script>
<script>
$(document).ready(function(){
$("#form").validate({
alert("hi");
rules: {
name: {
required: true,
midlength: 5,
},
email: {
required: true,
email: true,
},
password: {
required: true,
midlength: 5,
equalTo: "#verify",
},
}
});
});
</script>
<style>
label{
width: 150px;
display: inline-block;
}
label.error{
color: red,
}
</style>
</head>
<body>
<form id="form">
<label>Name : </label>
<input type="text" name="name" /><br/>
<label>Email : </label>
<input type="text" name="email"/ ><br/>
<label>Password : </label>
<input type="text" name="pass" /><br/>
<label>Verify Password : </label>
<input type="text" name="verify" id="verify" /><br/>
<input type="submit" />
</form>
</body>
</html>
This doesn't look right:
<script type="text/javascript" src="js/jquery.validate"></script>
Try this
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
Make sure the file exists with that filename in the js folder. Check the browser console to see if you get any errors - currently I'd expect your code to say "jquery.validate not found".
there is a comma at end of
password: {
required: true,
midlength: 5,
equalTo: "#verify",
},
that break js execution
I'm looking to validate a URL without requiring the user to enter "http://". How it is in the form below, "http://" must be entered for the form to be submitted. I can't figure out how to do this. Any help would be much appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and a url.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, URL: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
url: true
}
}
});
</script>
</body>
</html>
Edit: Took isherwood's advice:
var txt = $('#website').val();
var http = txt.indexOf('http://');
if (http > -1) {
$('#website').val(txt);
} else {
$('#website').val('http://' + txt);
}
Why not add it to the URL for your users? A URL isn't a URL without a protocol anyway (the exception being protocolless URLs, but they still have '//').
$('#myform').on('submit', function() {
var myURL = 'http://' + $('#field').val();
$('#field').val(myURL);
});
you can use addmethod with REGEX, just add the class from the method to your input
http://jqueryvalidation.org/jQuery.validator.addMethod/
I am getting the following error when I am trying to run this code on the browser.
"Error response
Error code: 501
Message: Unsupported method ('POST').
Error code explanation: 501 - Server does not support this operation."
The following errors were in the browser console:
"1. Failed to load resource: the server responded with a status of 404 (File not found)
'http://localhost:8002/js/jquery-1.3.2.min.js'
Resource interpreted as Script but transferred with MIME type text/plain:
pquery-0.0.1.js:1
Failed to load resource http://mdsad.com/p.js?v=1372783767755
undefined login.html:61
POST
http://localhost:8002/login.html 501 (Unsupported method ('POST')) login.html:1
Resource interpreted as Script but transferred with MIME type text/plain:
pquery-0.0.1.js:1
GET http://mdsad.com/p.js?v=1372783801500 download.js:33"
The login of users via stackmob also fails. I get a 'Failure' alert message. Here is the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(".username").focus(function() {
$(".user-icon").css("left","-48px");
});
$(".username").blur(function() {
$(".user-icon").css("left","0px");
});
$(".password").focus(function() {
$(".pass-icon").css("left","-48px");
});
$(".password").blur(function() {
$(".pass-icon").css("left","0px");
});
});
</script>
<script type="text/javascript">
function nextpage(form){
StackMob.init({
publicKey:"my_key",apiVersion:0
});
var u=document.getElementById('username').value;
var p=document.getElementById('password').value;
var user = new StackMob.User({ username: u, password: p});
user.login(false, {
success: function(model, result, options) {
alert("Success");
StackMob.isUserLoggedIn(form.username.value, {
yes: function() { alert("Yes"); },
no: function() {
alert("No");}
});
},
error: function(model, result, options) {
console.log(result);
alert("Failure");//or print out the error
} }); };
</script>
</head>
<body>
<div id="wrapper">
<div class="user-icon"></div>
<div class="pass-icon"></div>
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill in the details</span>
</div>
<div class="content">
<input id="username" name="username" type="text" class="input username" value="Username" onfocus="this.value=''" />
<input id="password" name="password" type="password" class="input password" value="Password" onfocus="this.value=''" />
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" onclick="nextpage(this.form)"/>
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
</div>
<div class="gradient"></div>
</body>
</html>
However, I am sure about the stackmob part because it worked well in a simple code of mine. Here is the working simple code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.9.1-bundled-min.js"></script>
<script type="text/javascript">
function nextpage(form){
StackMob.init({publicKey:"my_key",apiVersion:0});
var u=document.getElementById('username').value;
var p=document.getElementById('password').value;
user.login(false, {
success: function(model, result, options) {
alert("Success");
StackMob.isUserLoggedIn(form.username.value, {
yes: function() { alert("Yes"); },
no: function() {
alert("No");
}
});
},
error: function(model, result, options) {
console.log(result);
alert("Failure");//or print out the error
}
});
};
</script>
</head>
<body>
<form>
<table>
<tr><td>Username</td><td><input id="username" type="text"></td></tr>
<tr><td>Password</td><td><input id="password" type="text"></td></tr>
<tr><input type="button" value="LOGIN" onclick="nextpage(this.form)"></tr>
</table>
</form>
</body>
</html>
Can someone please tell me where am I going wrong?
You are running a local server on port 8802 but the javascript file "jquery-1.3.2.min.js" is not at the location specified, hence the 404 error.
The 501 error is because the server you are using (presumably something like simpleHTTPServer) doesn't support POST requests.
To resolve that error you need to use a server that supports POST requests (e.g. Apache, IIS).
Your importing Jquery twice, and two different versions, this could add all sorts of strange issues assuming the 404 is inaccurate.
Remove this line:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
If nothing else it will clear the 404