We Keep Coding

Onclick and jQuery click working together but return false not working in jquery

Onclick and jQuery click working together but return false not working in jquery. I want to validate fields before on onclick open next page. Problem with my code is that if filed are blank in that case it open next page. I use return false in each empty case. So until all fields are not filled up. next page should not open.
Html Code
<button id="onepage-guest-register-button" type="button" class="button secondary" onclick="$('login:guest').checked=true; checkout.setMethod();"><span><span><?php //echo $this->__('Checkout as Guest') ?></span></span></button>
jQuery Code
jQuery('#onepage-guest-register-button').click(function(e){
var email=jQuery('#login-email').val();
jQuery('.validate-email').attr('value', email);
var login_name = jQuery('#login_name').val();
var login_phone = jQuery('#login_phone').val();
var login_email = jQuery('#login_email').val();
alert("name"+login_name+'phone'+login_phone+'email'+login_email);
if(login_name==''){ jQuery('.login_name').text('Please enter full name'); return false; }else{ jQuery('.login_name').empty();}
if(login_phone==''){ jQuery('.login_phone').text('Please enter Phone Number');return false;}else{ jQuery('.login_phone').empty();}
if(login_email==''){ jQuery('.login_email').text('Please enter Phone email');return false;}else{ jQuery('.login_email').empty();}
//alert('trigger');
jQuery('#onepage-guest-register-button').trigger('onclick');
});

Don't mix onclick attribute with onclick event handler. It's just plain silly.
In most cases, it's better to go with the latter.
1) Remove onclick attribute
<button id="onepage-guest-register-button" type="button" class="button secondary"><span><span><?php echo $this->__('Continue') ?></span></span></button>
2) Move the logic into your onclick event handler.
jQuery('#onepage-guest-register-button').click(function(e){
// no idea
var email = jQuery('#login-email').val();
jQuery('.validate-email').attr('value', email);
// get values
var login_name = jQuery('#login_name').val();
var login_phone = jQuery('#login_phone').val();
var login_email = jQuery('#login_email').val();
// flag if errors is found; assume no errors by default
var err = false;
// clear errors?
jQuery('.login_name').empty();
jQuery('.login_phone').empty();
jQuery('.login_email').empty();
// show errors if any
if (login_name == '') {
jQuery('.login_name').text('Please enter full name');
err = true;
}
if (login_phone == ''){
jQuery('.login_phone').text('Please enter Phone Number');
err = true;
}
if (login_email == ''){
jQuery('.login_email').text('Please enter Phone email');
err = true;
}
// do the appropriate action depending if there are errors or not
if (err) {
return false;
} else {
$('login:guest').prop('checked', true);
checkout.setMethod();
}
});

Javascript form validation code looping

The following code loops when the page loads and I can't figure out why it is doing so. Is the issue with the onfocus?
alert("JS is working");
function validateFirstName() {
alert("validateFirstName was called");
var x = document.forms["info"]["fname"].value;
if (x == "") {
alert("First name must be filled out");
//return false;
}
}
function validateLastName()
{
alert("validateLastName was called");
var y = document.forms["info"]["lname"].value;
if (y == "") {
alert("Last name must be filled out");
//return false;
}
}
var fn = document.getElementById("fn");
var ln = document.getElementById("ln");
fn.onfocus = validateFirstName();
alert("in between");
ln.onfocus = validateLastName();

There were several issues with the approach you were taking to accomplish this, but the "looping" behavior you were experiencing is because you are using a combination of alert and onFocus. When you are focused on an input field and an alert is triggered, when you dismiss the alert, the browser will (by default) re-focus the element that previously had focus. So in your case, you would focus, get an alert, it would re-focus automatically, so it would re-trigger the alert, etc. Over and over.
A better way to do this is using the input event. That way, the user will not get prompted with an error message before they even have a chance to fill out the field. They will only be prompted if they clear out a value in a field, or if you call the validateRequiredField function sometime later in the code (on the form submission, for example).
I also changed around your validation function so you don't have to create a validation function for every single input on your form that does the exact same thing except spit out a slightly different message. You should also abstract the functionality that defines what to do on each error outside of the validation function - this is for testability and reusability purposes.
Let me know if you have any questions.
function validateRequiredField(fieldLabel, value) {
var errors = "";
if (value === "") {
//alert(fieldLabel + " must be filled out");
errors += fieldLabel + " must be filled out\n";
}
return errors;
}
var fn = document.getElementById("fn");
var ln = document.getElementById("ln");
fn.addEventListener("input", function (event) {
var val = event.target.value;
var errors = validateRequiredField("First Name", val);
if (errors !== "") {
alert(errors);
}
else {
// proceed
}
});
ln.addEventListener("input", function (event) {
var val = event.target.value;
var errors = validateRequiredField("Last Name", val);
if (errors !== "") {
alert(errors);
}
else {
// proceed
}
});
<form name="myForm">
<label>First Name: <input id="fn" /></label><br/><br/>
<label>Last Name: <input id="ln"/></label>
</form>

Not tested but you can try this
fn.addEventListener('focus', validateFirstName);
ln.addEventListener('focus', validateLastName);

Form Validation w/Javascript - Not working

I have the following form, done with HTML and Javascript validation.
var submitOK=true;
function validate(){
submitOK=true;
checkName();
checkSurname();
checkCourse();
checkDate();
checkEmail();
if(submitOK == false) {
return false;}
}
function checkName() {
var name = document.getElementById("name");
if(myform.name.value.length==0)
{
document.getElementById("checkname").innerHTML="Please, enter a valid name";
submitOK=false;
}
}
(COMPLETE CODE IN HERE)
http://jsfiddle.net/unkok6or/
The fields Course, Date, Name, Surname and Email have to be required. I don't know why my code is wrong and how to fix it.
-What I would like, is an error message to appear if one of the fields is not complete. Now the form runs and works even if one of them is not completed.
-The email with the correct format (without Regex).
Thanks in advance! :)

I simplified your code a little bit. This worked for me. The key thing to remember that your submit function must return a true to submit or false to stop the submit.
var submitOK=true;
function validate(){
submitOK=true;
checkName();
checkSurname();
checkCourse();
checkDate();
checkEmail();
return submitOK;
}
function checkName() {
if( document.getElementById("name").value.length==0)
{
document.getElementById("checkname").innerHTML="Please, enter a valid name";
submitOK=false;
}
}
function checkSurname() {
if(document.getElementById("surname").value.length==0)
{
document.getElementById("checksurname").innerHTML="Please, enter a valid surname";
submitOK=false;
}
}
function checkEmail() {
if(document.getElementById("email").value.length==0)
{
document.getElementById("checkemail").innerHTML="Please, enter an email";
submitOK=false;
}
}
function checkCourse() {
if(document.getElementById("course").selectedIndex < 1 ) {
document.getElementById("checkcourse").innerHTML="Please, select a course";
submitOK=false;
}
}
function checkDate() {
if(document.getElementById("date").selectedIndex < 1) {
document.getElementById("checkdate").innerHTML="Please, select a date";
submitOK=false;
}
}

You need to return true when your validation passes so change
if(submitOK == false) {
return false;}
to
return submitOk;

If you just need to make sure all the fields are filled, why don't you use required keyword on ur input types.
And for drop down you can disable the select option that way you don't need to check if the user has selected the default value.

Javascript post form

Im trying to submit a form by javascript, after a specific field is validated.
im using
function doValidate(){
var error = false;
var nr = document.getElementById('number').value;
if (nr > '10'){
document.getElementById('number').className += " red";
error = true;
}
if (error = false) {
document.forms["new_qs"].submit();
}
}
but when error is false, just nothing happens!
I inspected the site with firebug, error is false, the document.forms seems to do nothing.
But in Online Tutorials this is working very good.
Here is a complete fiddle from the site http://jsfiddle.net/S7G9J/25/
What could be the problem/solution?

if (error = false) {
In the above, you are using assignment operator. =. Use == to compare
Also you are comparing string instead of numbers.
Try this:
function doValidate(){
var error = false;
var nr = Number(document.getElementById('number').value);
if (nr > 10){
document.getElementById('number').className += " red";
error = true;
}
if (error === false) {
document.querySelector('[type="button"]').submit();
}
}

The error lies in the line where you submit() the form.
In your fiddle, your form's id is "test". In your javascript, the form you're referencing should have an id of "new_qs". However, there is no such form, so there is no submit() processed.
document.forms[0].submit() will submit the first form in order of appearance in your HTML. So, try this:
function doValidate(){
var error = false;
var nr = document.getElementById('number').value;
if (nr > '10'){
document.getElementById('number').className += " red";
error = true;
}
if (error == false) { // need double equal here
document.forms[0].submit();
}
}

Javascript form validation

I'm trying to have two functions checking each form input, one for onchange() and the other for onkeypress(); my reason for this would be to show if the input was valid once you leave the input field using onchange() or onblur(), and the I also wanted to check if the input field was ever empty, to remove the message indicating that bad input was entered using onkeypress() so that it would update without having to leave the field (if the user were to delete what they had in response to the warning message.)
It simply isn't working the way I intended, so I was wondering if there was something obviously wrong.
My code looks like this:
<form action="database.php" method = post>
Username
<input type='text' id='un' onchange="checkname()" onkeypress="checkempty(id)" />
<div id="name"></div><br>
.....
</form>
And the Javascript:
<script type="text/javascript">
function checkname() {
var name = document.getElementById("un").value;
var pattern = /^[A-Z][A-Za-z0-9]{3,19}$/;
if (name.search(pattern) == -1) {
document.getElementById("name").innerHTML = "wrong";
}
else {
document.getElementById("name").innerHTML = "right!";
}
}
function checkempty(id) {
var temp = document.getElementById(id).value;
if (!temp) {
document.getElementById("name").innerHTML = '';
}
}
</script>

Per your clarification in the comments, I would suggest using the onkeyup event instead of onkeypress (onkeypress only tracks keys that generate characters - backspace does not). Switching events will allow you to validate when the user presses backspace.
Here's a working fiddle.
Edit:
See this SO question for further clarification: Why doesn't keypress handle the delete key and the backspace key

This function should below should check for empty field;
function checkempty(id) {
var temp = document.getElementById(id).value;
if(temp === '' || temp.length ===0){
alert('The field is empty');
return;
}
}
//This should work for check name function
function checkname() {
var name = document.getElementById("un").value;
var pattern = /^[A-Z][A-Za-z0-9]{3,19}$/;
if (!name.test(pattern)) {
document.getElementById("name").innerHTML = "wrong";
}
else {
document.getElementById("name").innerHTML = "right!";
}
}