I've currently created this code to check for an array (For the Login) before moving to the next array to corroborate the password. For some reason, there's a specific instance within the code preventing a javascript prompt or alert box from popping up. I've done trial and error and it appears to be an issue with the while statement overall. But, further testing is not revealing anything obvious.
while(loginSelection != true)
{
alert("Welcome to the Ballot Design Process");
var loginUsername = prompt("Please enter in your username: ");
for(checkFor; checkFor <= userID.length; checkFor++)
{
if(loginID == userID(count))
{
if(user_password == password(checkFor)
{
loginPassword = prompt("Please enter in your password: ");
}
}
else
{
arrayPos += 1;
if(arrayPos == userID.length-1)
alert("Sorry, you did not enter a correct identification.");
}
}
}
You are missing a closing bracket on your if statement:
if(user_password == password(checkFor)) <<<<<
I recommend checking your javascript code with something like http://www.jshint.com if your debugger/IDE isnt picking it up.
Related
I am creating a custom control in Asp.net and there is a client side validation on an input field.
Control Code (extract of the whole code):
output.AddAttribute("OnBlur", "ValidateText(this)");
output.RenderBeginTag(HtmlTextWriterTag.Input);
And here is the JS code:
function ValidateText(ctl) {
if (ctl.value == '') {
alert("Enter something!");
ctl.focus();
}
}
I want the function to show an alert and then make the input field focused.
However, when I run the code, the alert box does not go away after a click or pressing the Enter key and I need to do it couple of times.
What is wrong in the code?
function ValidateText(ctl) {
if (ctl === '' || ctl === undefined) {
alert("Enter something!");
ctl.focus();
}
}
I'm working on a field verification clause before initializing Googles reCAPTCHA and I'm running into a bit of a problem.
I can check if a element has a value by it's ID, however I can't seem to get by CLASS working. I basically want to execute the recaptcha if all fields with the class REQUIRED are filled in.
By ID, this works for only one question.
function validate(event) {
event.preventDefault();
if (!document.getElementById('q1').value) {
alert("You must enter text into the required fields!");
} else {
grecaptcha.execute();
}
By CLASS, not working :(
function validate(event) {
event.preventDefault();
var questions = document.getElementsByClassName('required');
for (var i=0; i<questions.length; i++) {
if (questions[i].value) {
alert("You must enter text into the required fields!");
} else {
grecaptcha.execute();
}
}
I've never done anything like this before, so any insight on a solution would be gratefully appreciated.
Cheers.
Two issues:
You're calling grecaptcha.execute repeatedly, once for every valid field (even if other fields are not valid).
You're checking questions[i].value which will be falsy if blank and truthy is not blank, but then treating truthy as blank.
Instead, just remember whether you've found any invalid ones and then issue an error or execute it (and add ! to the check):
var questions = document.getElementsByClassName('required');
var valid = true;
for (var i=0; valid && i<questions.length; i++) {
if (!questions[i].value) {
valid = false;
}
}
if (valid) {
grecaptcha.execute();
} else {
alert("You must enter text into the required fields!");
}
Side note: Your current check for empty fields will accept fields with only spaces in them. If you want to weed those out as well, use trim (on any vaguely-modern browser, and you can polyfill it for obsolete ones like IE8):
if (!questions[i].value.trim()) {
If one element is right, it executes the recaptcha. You want to check if all are right:
function validate(event) {
event.preventDefault();
var questions = document.getElementsByClassName('required');
for (var i=0; i<questions.length; i++) {
if (questions[i].value && question[i].value!=="") {
return alert("You must enter text into the required fields!");
}
}
grecaptcha.execute();
}
can someone explain this to me? why is it prompt() running again?
And please give me some advice where and what should i change to have a better code. thank you.
function welcomeGuest() {
do {
guestName = prompt("Welcome to my Anime Website! May I know your name?");
if (guestName === null || guestName === false) {
alert("Please come back again.");
window.close();
}
if (guestName === "") {
alert("Please enter your name!");
} else if (guestName.length < 4) {
alert("Your name should be atleast 4 characters!");
} else if (!(isNaN(guestName))) {
alert("Your name can't be number!");
} else {
guestNamesmall = guestName.slice(1, guestName.length);
alert("Welcome to my Anime Website, " + guestName.charAt(0).toUpperCase() + guestNamesmall + "!");
//bodyContent();
}
} while (guestName.length < 4 || !(isNaN(guestName)));
}
// EDIT: adding call to function for demo purposes
welcomeGuest();
EDIT : I'm sorry but my question is when I enter correct input(it should go to else statement, right?) but what happens to me is that the prompt is running again if else statement is met. Why is that?
if you call your welcomeGuest function only once and the condition inside your while loop is respected guestName.length < 4 || !(isNaN(guestName))it will not running again.
The reason prompt is showing up again is because you have it in a loop until your condition is met. Therefore if guestName.length < 4 || !(isNaN(guestName)) is never met, then it will continue to show.
I would avoid using a loop for something like this. You can use css to prevent a user from going through your site instead of continuously prompting them through a loop. Then use events to handle your logic. Do you have a submit/enter button? Then add your logic on the click event. If not, then you can do it on the key down event and look for the enter key.
for example:
var textbox = document.getElementById("idOfTextbox")
with option 1
textbox.addEventListener("keydown", function(event) {
//stop the click event from propagating
event.preventDefault();
//check if enter key was clicked (#13)
if (event.keyCode == 13) {
//do your logic to verify pass/fail of user input
}
});
or option 2
textbox.addEventListener("click", function(event) {
//stop the click event from propagating
event.preventDefault();
//do your logic to verify pass/fail of user input
});
There are other events you may use, but I think these two would be the most beneficial in this situation.
Image of form that uses AJAX & JS
I've currently got a maintainer that uses AJAX so when I type a number into the "Order No" field the "Calc" field then gets updated with the "Account" associated with the Order No. It all works however the "Calc" field doesn't fill with the account number until a click away from the Order No field has been done which means that if you were to press the enter key after typing the number the calc is still blank when the checks were made to see if the account and calc numbers are the same.. If you were to type the number then click the "Accept" button the update is then done so the checks then work as expected. So I was wondering if there is a way so that this field could get updated without an extra click.
One solution I came up with was by doing the checks such as account==calc and calc != "" twice so it would run a function where the check would always say that the calc field is blank (as it hasn't updated at this point) which would return an alert saying "Blank" then after returning the alert it would run another function which is exactly the same to do the check again and this time it would work as expected but once the alert is taken out its as if it hasn't got that moments wait which allows for the Calc field to be updated in time.
Its hard for me to post all the code as I use a system that does all the AJAX behind the scenes for you but let me try explain how the AJAX works. Whatever you put in the Order No field will be sent to an external retrieval application that would check to see what account number is associated with the order no and then return it to the Calc field. If then the account and the calc field numbers match submit the form else say its an incorrect order number for that specific customer.
Here are the two JavaScript functions:
function testerRun() {
var abc = ('${row.CUSN760?html}').toString();
var def = document.getElementById("CALCULA001").value;
if (abc == def && abc != "") {
//alert("Order Number & Account Number Match!");
document.getElementById('FORM_M07052').submit();
return true;
} else if (document.getElementById('ORDN760').value == "") {
document.getElementById('FORM_M07052').submit();
return true;
} else {
//alert("Blank First Step!");
finalStep();
}
}
function finalStep() {
if (document.getElementById("CALCULA001").value == "") {
alert("Customers Account Details Need Amending..");
return false;
} else {
var abc = ('${row.CUSN760?html}').toString();
var def = document.getElementById("CALCULA001").value;
if (abc == def && abc != "") {
//alert("Order Number & Account Number Match!");
document.getElementById('FORM_M07052').submit();
return true;
} else if (document.getElementById('ORDN760').value == "") {
document.getElementById('FORM_M07052').submit();
return true;
} else {
alert("Order Number & Account Number Do Not Match!");
return false;
}
}
}
And here is where the script is called:
<input class="btn btn-primary accept" id="btnaccept" name="btn_accept" onclick="testerRun();return false" type="submit" value="Accept" />
#Shreyas Sorry there is no blur or change as im using a system called MRC and so they use behind the scenes AJAX scripts to handle thigns like this what I don't have access too so I need some sort of work around. Its only an issue when the user clicks enter in the order no field after entering the order number without doing anything else on the form as it doesn't update until the order number is deselected.
document.getElementById('ORDN760').onkeydown = function(event){
if (event.which == 13 || event.keyCode == 13) {
document.getElementById('ORDN760').blur();
testerRun();
}
}
Function call not working though doesn't seem to do anything just sits there after blur.
Add a keypress handler on the Order No field, which listens for the Enter key, and submits the form when Enter is pressed.
document.getElementById('ORDN760').onkeydown = function(event){
if (event.which == 13 || event.keyCode == 13) {
document.getElementById('ORDN760').blur();
return false;
}
}
I'm trying to build a small login system using jquery (since it is for testing purposes only and the user and password won't change) So i made a form and when you click the button i test whether the details are correct. if so you will get send to the next page. If not i give an alert.
It's working but i have something weird. The first time you visit the site and fill in the details it does nothing. The second time (after submitting) it works like it should.
Does someone know why?
Here is the code:
function controllogin() {
event.preventDefault();
var username = $("#gebruikersnaam").val()
var password = $("#wachtwoord").val()
if (username=="leerkrachten" && password=="leerkrachten") {
alert("welkom leerkrachten");
goToUrl();
}
else if (username=="leerling" && password=="leerling") {
alert("welkom leerling");
}
else {
alert("verkeerde gegevens ingevuld");
}
};
function goToUrl() {
alert("zoeken naar pagina");
window.location = 'leerkrachten/vakken.html';
};
Instead of onclick="controllogin();" try something like this:
$('document').ready(function() {
$('#submit').click(function(event) {
event.preventDefault();
var username = $("#gebruikersnaam").val()
var password = $("#wachtwoord").val()
if (username==="leerkrachten" && password==="leerkrachten") {
alert("welkom leerkrachten");
goToUrl();
}
else if (username==="leerling" && password==="leerling") {
alert("welkom leerling");
}
else {
alert("verkeerde gegevens ingevuld");
}
});
});
Also use === instead of == as operators to compare the strings, it prevents you from some weird results when comparing different types. Maybe that's why it doesn't work the first time, but does the second time. Otherwise I don't know why this happens.
But actually I'd have to say: NEVER do client-side login validation and NEVER do login validation with an unencrypted password (not even server-side)!