I keep getting this error saying that it cannot find my javascript function checkpw(). It's being called by onfocus.
<script type="text/javascript" >
function checkpw() {
alert ("working");
}
</script>
</head>
<body>
<h2>Welcome to our webpage.</h2>
<p>{{ reginfo}}</p>
<form action="/validate/" method ="get" >
<p>Username</p>
<input type="text" name="username" class="textbox"> </input > </br>
<p>Password</p>
<input class="textbox" name="password" id="password" type="text"> </input > </br>
<p>Confirm Password</p>
<input class="textbox" id="checkpw" type="text" onfocus="checkpw()"> </input > </br>
<p>Email<p>
<input class="textbox" name="email" type="text"> </input > </br>
<input type="submit" class="button" value="Submit">
</form>
</body>
I'm probably making a really stupid mistake but i'm new to javascript so anything that helps would be great. thanks.
Due to behavior that some ancient version of Internet Explorer implemented, in "quirks" mode, most browsers will let you directly address an element by its id.
E.g.
<div id="test"></div>
<script>
test.innerHTML = 'Hi';
</script>
I think this is what's happening for you. You have an element with id checkpw and also a function named checkpw. I think as the element is defined later on in the file, it is winning out, and since it's not a function, attempting to invoke it in your onfocus handler doesn't work.
Either change the name of your function, change the id of the element, or (more preferably) ensure that your page is not rendering in "quirks" mode (e.g. proper doctype, no invalid HTML, etc)
change: function checkpw() to: function checkPw()
and: focus="checkpw()" to: focus="checkPw()"
Edit:
It is not a reserved word; however the name is already polluted in the global namespace. As Domenic and jimr pointed out, the id attribute is using the same name, thus causing a conflicting condition.
The solution is still to change either:
(1) the id value of the input element
-or-
(2) the function name (as I stated above)
Related
I'm very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/
use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}
I am trying to validate the fields using CFINPUT and then calls a popup window function to do more stuff BEFORE submitting the form but it's not working. The onclick function seems to take precedent over the CFINPUT validation. As soon as I click on the Submit button it's calling the popup window function first without validating the fields. I need it to:
first validate the fields
call the popup function
then submit the form after the popup closes itself
(p.s. I see other similar case on here but there is no answer given)
The code looks like this:
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
<input type="submit" value=" Send " onclick="popup()">
....
Please help. Thank you.
This is an old blog posting so not sure how accurate things are today but it shows how you can run the CFFORM validation via the _CF_checkTaskForm() function. So it seems like if you change the submitting of the form to a button via <input type="button" value="Send" onclick="popup(this.form)" /> then change the popup function to first validate the form via the _CF_checkTaskForm() and if that passes to proceed with the other JS you are doing.
http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/
To expand on that, I just looked at a CF8 and CF11 installations and looks like the function in those is _CF_checkCFForm_1 if using that version of CF then something like this should get you in the correct direction:
<script>
popup = function(formreference) {
var check = _CF_checkCFForm_1(formreference);
if (!check) {
//if the rules failed then do not submit the form
return false;
} else {
// Do the popup
}
}
</script>
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
<input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>
The cfinput validation you're attempting to do is the client-side equivalent to
<cfif len(trim(string)) gt 0>
(Edit: That is not to imply that you should depend wholly on client side validation. Client-side validation is more of a feature to help your visitors. Server side validation is still important.)
Which I have to say is really weak validation. Anything consisting of at least 1 non-whitespace character will pass the test. People will be able to have usernames like "!" which isn't fanstastic, but that's just some information.
On the jQuery Validate link you provided, they show an example form (along with a link of the same form in action)
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
This very basic example shows how simple Validate can be to install, and a simple format of
<input name="ele" type="text" required>
is exactly the same level of validation you're attempting. So, to begin with, you can almost copy and paste the code. (Aside from from the different requirements you can make, setting minlength requires a certain number of characters and requires that at least one not be whitespace).
jQuery Validate can get quite extensive but is very easy to basically install and once you become familiar, make custom classes as needed
As a final note, don't disregard the disdain for CFForm elements. It may seem like others are disregarding your question, but that's not the case.
To be honest, they began to be introduced at a different time in the life of the internet, but have always been kind of finicky to work with. Expansion to them, in the opinions of many, have not been done well and have frequently exasperated the flaws.
It's super attractive to be able to say <cfinput...required> but the tags become a nuisance and you don't easily have the fine control over them that you might desire. They're a crutch, and a rusty crutch at that.
You might check out CFUI The Right Way # Github or this hosted version for some great insight and examples.
I have a total of two input values. Only one value passes to the url of the next page, but both should. What's causing this?
JSFiddle: http://jsfiddle.net/p8dCC/
HTML:
<!--form action="device" onSubmit=" get_search(); return false;" id="search-form-4" method="get" target="_top"-->
<div class="fix">Brand</div>
<input class="inputs" type="text" id="search_id" name="q3" placeholder="Send this" required="required" />
<br/><br/>
<div class="fix">Model</div>
<input class="inputs" type="text" id="search_id" name="q4" placeholder="And send this one too" required="required" />
<br/><br/>
<input id="search-button" class="" type="submit" value="continue" data-target="http://www.google.com/?item-description" />
<!--/form-->
You have two elements with the same id in html. So when you do this $('#search_id').val() only one of them will get evaluated and not both. Ids are supposed to be unique
After testing your code in a test page, I found that both inputs were in fact being passed through the URL.
You have commented out the form tags which I'm not sure if you did just for purposes on here.
kjs is correct as well, though using the same id would only effect the HTML. Using get as the method would bypass this issue as it would be passed the unique "name" attribute.
A form tag is required if you expect the html submission mechanism to work correctly on its own.
In the Javascript you posted though, you are treating document.location as an html element, wrapping it with jquery, then trying to use jquery's attr method on it. This won't work. Just access "location.href" directly without using jquery.
Additionally, as pointed out by another answer, your ids should all be unique.
I have this very basic code that I feel should be working but isn't.
I have this form:
<form id="search-box" action="">
<input id="search" type="text" placeholder="Search here.." onkeyup="search(this.value)"><!--
--><input id="submit" type="submit" value="Search">
</form>
This form fires a JS search function. This search function contains:
function search(input){
alert(input);
}
I have linked the JS file containing the function in the head of the html document:
<script src="js/ajax.js"></script>
But the problem is this isn't working. I'm getting an error when the onkeyup is fired:
Uncaught TypeError: object is not a function localhost:16:201
onkeyup localhost:16:201
May I get some assitance?
In your code, you have a function named search and an element with the id of search. HTML elements with id's become global variables by that name, so the element with the id of search overwrites the search variable that was your function.
Try something like this.
HTML
form id="search-box" action="">
<input id="search" type="text" placeholder="Search here.." onkeyup="doSearch(this.value)"><!--
--><input id="submit" type="submit" value="Search">
</form>
JS
function doSearch(input){
alert(input);
}
In your HTML you can't have an element ID and function names same in a form. These creates conflicts.
When you add a ID in your form it adds that element as form[id]. So if you will have the same names of functions they will create conflict in same form.
Here is a very nice question has been answered about same.
I can't tell what I have done wrong here.
This part seems to be working, or at least it fires, because a breakpoint set with the debugger breaks in the code.
<script>
jQuery("#contactForm").validationEngine();
</script>
But it doesn't seem to be hooked up to the form fields and doesn't attempt to validate, or validates improperly, when used like this:
<form class = "contactform" id = "contactForm">
<fieldset>
<div class="contactform-email contactform-field">
<label class="contactform-label" for="contactform-email">Email Address:
<br>
</label>
<input class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="email" />
</div>
<input class="contactform-button" type="submit" name="submit" value="Send"/>
</fieldset>
</form>
Is there something I've mis-configured?
Bob
OK, I finally solved it.
The thing is that this code is running within the Meteor JavaScript framework and it expects code such as
jQuery("#contactForm").validationEngine();
To be in a Template.myTemplate.rendered function to execute properly and at the right time.
Still learning...