Form Validation

JavaScript
1

I need to have some validation on my form, and as its being run through jquery I was wondering if there a way of using what I got already to check the form.

<form name="form1" method="post" id="myForm">
<label for="form1_name">First Name *</label>
<input id="form1_name" type="text" name="fname" value=""/>

<label for="form1_lname">Last Name *</label>
<input id="form1_lname" type="text" name="sname" value=""/>
</form>

This is the jquery before it goes onto the ajax function

function serviceCall() {    

var fname = $("input[name=\"fname\"]").val();
var sname = $("input[name=\"sname\"]").val();
var company = $("input[name=\"company\"]").val();
var tel = $("input[name=\"tel\"]").val();
var address = $("input[name=\"address\"]").val();
var country = $("input[name=\"country\"]").val();
var email = $("input[name=\"email\"]").val();
var cemail = $("input[name=\"cemail\"]").val();
var password = $("input[name=\"password\"]").val();
var cpassword = $("input[name=\"cpassword\"]").val();
var allname = fname+' '+sname;

So im wondering if that above can be used to check all the fields, including a proper email etc

2

What happens if someone has JS switched off?

3

Hi,

It’s something yes that will need to be thought about, so will make a note and look into it, but at the moment this is an internal site thats only going to be used by a very small number of people, so it wont be an issue at the moment.

4

If you don’t require strict/secure validation it may be easier to just use the browsers built in validation by using html attributes in the inputs, like using appropriate types, the required attribute and pattern. Assuming the organisation uses up to date browsers.

5

Well ideally if I could, Id like to use the strict/secure validation as I can then cross it off my job list if this is going to be used more widely, and also something I can implement and check back to on other projects.

6

That would require server side scripting.
The html attributes are a quick convenient way to get client side on-page validation, but they don’t work in older browsers, although if you have server-side too, you are covered for that minority.

7

Yes.

Don’t confuse validation with security. Though there can be some overlapping, they are not the same thing.

The newer HTML input attributes and JavaScript can be good in terms of validation. They can let a user know there is a problem and give them a chance to fix it before submitting the form.

But they are essentially worthless in terms of providing security.

1 Like
8

Ye security isnt really an issue, and basically giving the user a chance to fix a mistake beofre submitting is ideal really, I just would like to do it with proper validation on email etc.

9

For modern browsers simply using type="email" should do the trick.

1 Like
10

Hi Lee, I’d do it as Sam suggests. If you’re set on using JS though, this should get you started:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form validation</title>
  </head>
  <body>
    <form name="form1" method="post" id="myForm" action="process.php">
      <label for="form1_name">First Name *</label>
      <input id="form1_name" type="text" name="fname" value=""/>

      <label for="form1_lname">Last Name *</label>
      <input id="form1_lname" type="text" name="sname" value=""/>

      <button>Submit</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
      $("#myForm").on("submit", function(e){
        var errorMessage;
        var inputs = $(this).serializeArray();

        if(inputs[0].value === "" ||
           inputs[1].value === ""){
          errorMessage = "Form fields may not be blank";
        }

        if (errorMessage) {
          alert(errorMessage);
          e.preventDefault();
        }
      })
    </script>
  </body>
</html>
11

Thank you Pullo,

I will revert to yours if below doesnt work or makes sense, as at the moment as I was developing it last night it doesnt work.

This is what Im trying.

<form name="form1" id="signupForm" method="post" id="myForm">
<label for="form1_name">First Name *</label>
<input id="form1_name" type="text" name="fname" value="" required />

<label for="form1_lname">Last Name *</label>
<input id="form1_lname" type="text" name="sname" value="" required />

<label for="form1_email">Email *</label>
<input id="form1_email" type="email" name="email" value=""/>

<label for="form1_cemail">Confirm Email *</label>
<input id="form1_cemail" type="email" name="cemail" value=""/>

<label for="form1_password">Password *</label>
<input id="form1_password" type="text" name="password" value=""/>

<label for="form1_cpassword">Confirm Password *</label>
<input id="form1_cpassword" type="text" name="cpassword" value=""/>

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

<script>
function serviceCall() {
$("#signupForm").validate({
rules: {
fname: {
required: true,
maxlength: 20
},
sname: {
required: true,
maxlength: 20
},
password: {
required: true,
minlength: 5
},
cpassword: {
required: true,
minlength: 5,
equalTo: "#form1_password"
},
email: {
required: true,
email: true
},
cemail: {
required: true,
email: true,
equalTo: "#form1_email"
},
},
messages: {
fname: "Please enter your firstname",
sname: "Please enter your lastname",

password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
cpassword: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
}
});     

var fname = $("input[name=\"fname\"]").val();
var sname = $("input[name=\"sname\"]").val();
var company = $("input[name=\"company\"]").val();
var tel = $("input[name=\"tel\"]").val();
var address = $("input[name=\"address\"]").val();
var country = $("input[name=\"country\"]").val();
var email = $("input[name=\"email\"]").val();
var cemail = $("input[name=\"cemail\"]").val();
var password = $("input[name=\"password\"]").val();
var cpassword = $("input[name=\"cpassword\"]").val();
var allname = fname+' '+sname;

Maybe Im either over complicationg it, or missing something major to get the validation to work, but this validation doesnt come into play when I click submit with these empty fields.

12

You’re using the jQuery validate plugin?

13

Just a note, the password fields should have type="password".

2 Likes
14

I came across it last night in a thread somewhere, it was different to this and before you posted back Pullo I was putting htis together and trying ot get it to work. Is it wrong to do what Im doing?

15

Can you post a demo on JSFiddle or CodePen

16

I hope this works now, havent done jsfiddle before - https://jsfiddle.net/accend4web/m2znc8a6/

1 Like
17

lol, it’s a start, but it’d help if you tidy it up a bit. For example, you can add external libs (jQuery validation, bootstrap) under the “External resources” tab. You can also add jQuery in the JavaScript pane (click the cog and select jQuery from “Frameworks and Extensions”).

The next thing is that you don’t need all of those fields (and all the JS logic) to demonstrate your problem. Just one or two fields should do.

JSFiddle can’t parse PHP, so it’d be great if you could remove that, too.

The aim of using JSFiddle is for you to recreate your problem in a concise manner that is easy for others to understand :slight_smile: At the moment it’ll take me too long to wade through the code and work out what you are doing where.

18

I’m glad you got a sense of humour Pullo, you’ll need it with me :slight_smile:

I have taken out the unecessary stuff now, such as after the validation, as all that is working fine, I can submit to web services and manage the return data for user feedback.

I have also added jquery validation to my web version as below with jquery

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js"></script>
19

Good, good. Do you have a new url?

20

I am working behind a vpn but have uploaded the whole file to a live server

Live