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.
Related
I am having issues with external javascript. Here is my basic form.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script src="../Javascript/UserScript.js" type="text/javascript"></script>
<title>Start Page</title>
</head>
<body>
<form id="newUser">
Email: <input type="text" name="Email"> <br/>
Password: <input type="password" name="Password"> <br/>
Confirm Password: <input type="password" name="ConfirmPassword"> <br/>
<input type="submit" name="Submit" />
</form>
</body>
If I call the following internally it works just fine. If I call it externally I get nothing.
$("#newUser").submit(function (event) {
event.preventDefault();
alert('hello world');
});
I even made a new file and did a test with something like this just to make sure jquery was working fine.
$(document).ready(function (e) {
alert('hello')
}
Put your code inside a document ready handler:
$(function () {
$("#newUser").submit(function (event) {
event.preventDefault();
alert('hello world');
});
});
You can't attach an event to an element before it exists. Your script runs before the #newUser element has been parsed and added to the DOM. The $("#newUser") in your code is producing an empty set.
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>
Javascript novice, looking to write a program that takes an input file, filenames.txt, tests each line to see if it contains a file path that is > 256 characters, and then outputs the results both as on-screen text and as a serializable format, i.e. .csv
here's the code that I have so far, I'm asking how to access the file selected and parse it for paths longer than 256 characters
<html>
<head>
<title>256 character finder</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
Pick a file:
<br>
<input id="lefile" type="file" style="display:none">
<div class="input-append">
<input id="fileSelect" class="input-large" type="text">
<a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
</div>
<div>
<input type="text" value="whatever" class="field left" readonly>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('input[id=lefile]').change(function() {
$('#fileSelect').val($(this).val());
});
}
</script>
</html>
http://jsfiddle.net/Fcg2X/
Try this:
$(document).ready(function() {
$('[type=file]').change(function() {
if (!("files" in this)) {
alert("File reading not supported in this browser");
}
var file = this.files && this.files[0];
if (!file) {
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var text = e.target.result;
//do something with text
document.body.innerHTML = text;
};
fileReader.readAsText(this.files[0]);
});
});
Btw non-supporting browsers include IE9 so be aware. Has been working for years in Firefox and Chrome though.
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 :(
I really don't know why this validation doesn't work.
this is my html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="scripts.js"></script>
<title>Test Page!</title>
</head>
<body>
<form onsubmit ="return validateFormOnSubmit(this)" name="myForm" action = "testForm.html">
<input name="textField" type="text" value="" size="50" id= "textfield" /> <br />
<input name="button" type="submit" value="Submit"/>
</form>
</body>
</html>
and this is my javascript file:
function isURL(fld){
var error = "";
var regex = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
if(regex.test(fld.value)){
error = "No URL's Allowed!";
}
else{
error = "";
}
return error;
}
function validateFormOnSubmit(myForm) {
var reason = "";
reason += isURL(myForm.textField);
if (reason != "") {
alert("there's something wrong: \n" + reason);
return false;
}
return true;
}
Thanks for your help.
update: is the action really required? testpage.html is just an empty html file here!
update 2: The problem is I don't see any message or alert.
It works fine, your scripts.js file isn't loaded properly or an old version is cached in your browser
Looks like you're passing in the form, rather than the field that you're trying to validate.