Form Validation

lol, dude on JSFiddle? The old one is still showing all of the stuff I was asking you to take out.

lol sorry Pullo, blinking heck mun…

I just clicked ‘Update’, is that it

Think I got it - https://jsfiddle.net/accend4web/m2znc8a6/4/

Sweet. We’re getting there. The URL for jQuery validation is wrong though (you can see this in the console). Please use a CDN or something.

Do you mean in jsfiddle or my site?

JSFiddle :slight_smile:

Umm - https://jsfiddle.net/accend4web/m2znc8a6/7/

Duuude. Go to that page, open the console and fix the errors :slight_smile:

I think if you where close by with my next sentence i think Id say it and run lol.

I cant see any errors in jsfiddle, there nothing standing out that i can see in any of the consoles, and I cant work out what your meaning, Im really sorry man

lol, no worries.

Go here: https://jsfiddle.net/accend4web/m2znc8a6/7/

Press “F12” and click “Console” (this works in Chrome)

Which browser are you using? What do you see?

I see:

Hi Pullo, your favourite nightmare is back to it, I had to jump off this to sort something else out but will need your support if you dont mind to get this finished. I left it and couldnt work out the errors, but will go back and make a new start. Thanks for everything so far

1 Like

What i dont get is that its showing a 404 and I added these files into external resources. Do I have to upload these files to a certain like media folder and then reference them in external resources

When you add external resources to a fiddle, you need to input a full URL to the file you want to be loaded. For example, if you look at the Bootstrap website you can get the CDN link for their JS file: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Ah I see, have added them in but then got an error on the jquery validator I think, but its a step forward, and at least I know now

https://jsfiddle.net/accend4web/m2znc8a6/8/

Your link to jQuery is still broken

Ok think I sorted that now, when i cleared the errors, and ran it again i can only see 1 error

SyntaxError: expected expression, got ‘}’

So will try and hunt that down

It’s not hard. Click the file in which the error message appears (on the right of the message itself, so fiddle.jshell.net/:338) and you will be taken to the error.

This is why I’m looking silly, I’m looking in the JavaScript panel and I cant see that last bracket, its not there.

I see this as the last couple of lines

$.ajax(
{

});
};

And I’m not sure how to work JSFiddle sorry, so I dont know what to click and work my way around to these different pages.

And the errorr is showing

$.ajax(
{

});
};

}//]]>

So thats why when I went through the open and closed brackets I couldnt see it.

I’ve got it on the live server now too, a copy of what Im doing

Live Demo

By calling $("#signupForm").validate({ ... }); you’re initializing the validation library for that form - the validation will only run once the form is submitted, so you don’t need to wrap your code in a function (i.e. serviceCall()).

However, the validation won’t be triggered, because the form is not being submitted. Here’s the current code you’re using for the button:

<div id="buttonSubmit" onclick="serviceCall();">SUBMIT</div>

You’d be better off using a proper <button> element, as that’ll submit the form (triggering validation) and also improve the usability/accessibility of the form - currently there’s no way to submit the form via keyboard, as you can’t tab to the button.

Ok so I can take the validation code from

$("#signupForm").validate({

And put it ouside the serviceCall() function in its own script tags.

Then change

<div id="buttonSubmit" onclick="serviceCall();">SUBMIT</div>

To I’m guessing something like

<button type="button" onclick="serviceCall();">Submit</button>

Ive just updated the file on the live site with my changes, the button works fine, but the validation isnt.

Yeah, and then you no longer need to set the onclick attribute on the button either.

One other thing - I notice you have an $.ajax() call within the function, to submit the form data. You’ll need to initiate that with a submitHandler function that you pass to the validation library.

Have a look at the example here, to see how to set that option.