CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
MistUnleashed
MistUnleashed

Reputation: 309

Javascript Code For HTML5 Form Validation Not Working

I'm new to JavaScript so I have no idea why this code does not work and validate my HTML5 Form like it should.

The JavaScript code which can be found below is supposed to check if the browser supports the required attribute and if it doesn't then it will validate the form and check for any empty spaces.

I got the code from this website.

In the body of the webpage containing my form I have this:

Below is the contactvalidate.js file:

$('#formTemplate').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
  $("#formTemplate [required]").each(function(index) {
  if (!$(this).val()) {
     alert("Please fill all required fields.");
     return false;
    }
   });
  }
 return false;
});

Do I need to change anything in this code or should it work?

As I've said I'm new to JavaScript so any help you guys could give me is greatly appreciated.

EDIT :

Here is my updated code:

$(function(){
        $('#contactForm').submit(function() {
            if (!attributeSupported("required") || ($.browser.safari)) {
                   $("#contactForm [required]").each(function(index) {
                         if (!$(this).val()) {
                               alert("Please Fill In All Required Fields.");
                               return false;
                         }
                   });
            }
  return false;
        });
    });


    function attributeSupported(attribute) {
        return (attribute in document.createElement("input"));
    }

The problem I am having is: When any field is empty it comes up with an alert (This is fine) but when the fields are filled in, the submit button doesn't work.

I have tried changing the second return false; to return true; but that comes up with alert as expected but then sends the form through anyway!

EDIT 2:

Here is my HTML5 Form code:

<form id="contactForm" method="post" action="php/contactform.php">

  <label>Name:</label>
  <input name="name" type="text" pattern="[a-zA-Z. -]+" placeholder="Your Name" title="You can only use letters in this box" required="required" data-required="true" autofocus="autofocus" />

  <label>Contact Number:</label>
  <input name="phone" type="tel" pattern="[0-9. -]+" placeholder="Your Contact Number" title="You can only use numerical values in this box" required="required" data-required="true" maxlength="13" />

  <label>Email:</label>
  <input name="email" type="email" placeholder="[email protected]" required="required" data-required="true"/>

  <label>Type Of Enquiry:</label>
  <input name="enquirytype" type="text" placeholder="Enquiry Type" required="required" data-required="true" maxlength="20" />

  <label>Message:</label>
  <textarea name="message" placeholder="Your Message" required="required" data-required="true"></textarea>

                <br />
                <br />

  <input id="submit" name="submit" type="submit" value="Submit" />
</form>

EDIT 3:

The reason it is not working is because Safari 'thinks' it has the required attribute that is why I was checking the browser rather than the attribute.

Could you adapt the code to check the browser rather than the attribute?

Also do I need this in my <head> tag:

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

I put it in but wasn't sure if I need it!

EDIT 4:

Right, when I press submit it comes up with the alert and as soon as I press Ok or press the 'x' button it sends the form through anyway with it being blank.

Also could you explain why you have mentioned Chrome in the code below?

Here is the code that I'm using:

//Function Declaration

function attributeSupported(attribute) {
    return (attribute in document.createElement("input"));
}

function isSafariOnly() {
    return navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
}

//Main Code

$(function () {
    $('#contactForm').submit(function () {
        if (!attributeSupported("required") || isSafariOnly()) {
            $("#contactForm [required]").each(function (index) {
                if (!$(this).val()) {
                    alert("Please Fill In All Required Fields.");
                    return false;
                }
            });
        }
        return true;
    });
});

EDIT 5:

Take a look at the JSFiddle

Even when it is opened in Safari it DOESN'T work.

When I press submit it comes up with the alert and as soon as I press Ok or press the 'x' button it sends the form through anyway with it being blank.

Please can you provide a fix for this?

Upvotes: 0

Views: 2387

Answers (1)

Vlad Bezden
Vlad Bezden

Reputation: 89547

Like Ethan Brown said, you might missing attributeSupported function. If this is the case, you can add it to your code. It will check if attribute (in your case it's "required") is supported

function attributeSupported(attribute) {
    return (attribute in document.createElement("input"));
}

EDIT:

After you provided HTML code and more information about your issue I was able to create working example for you at JSFiddle. The problem you had with $.browser.safari your javascript code was braiking on this statement. After checking documentation I found that it was deprecated in jQuery 1.9, and it is recommended to use feature detection instead of browser detection. I added isSafari function for you and used that function instead of jQuery browser detection.

function isSafariOnly() {
    return navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
}

So your main JavaScript code now looks like

$(function () {
    $('#contactForm').submit(function () {
        if (!attributeSupported("required") || isSafariOnly()) {
            $("#contactForm [required]").each(function (index) {
                if (!$(this).val()) {
                    alert("Please Fill In All Required Fields.");
                    return false;
                }
            });
        }
        return true;
    });
});

remember if you return false from your function, your form will not be submitted, that is why you have first return false when your form failed validation and you don't want to submit your form. When your form passed validation and everything is fine, you return true and your form will now be submitted to the url provided in action of the form tag.

Please notice in my jsFiddle example I have google address. In your example you will have to specify your page address.

EDIT 2:

Also do I need this in my <head> tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

Yes, you need it. That is a reference to your jQuery library (everywhere you see $ in your code is a jQuery). However I would not recommend to use jquery-latest in production, because if there is some break change, your code will stop working on production. Instead I would recommend to use well known and tested version. For instance

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Please notice you have to have <script ...></script> otherwise it will not work.

Could you adapt the code to check the browser rather than the attribute?

If you need to check only for Safari browser just use:

if (isSafariOnly()) {
    $("#contactForm [required]").each(function (index) {
        if (!$(this).val()) {
            alert("Please Fill In All Required Fields.");
            return false;
         }
    });
}

EDIT 3:

Also could you explain why you have mentioned Chrome in the code below?

The reason for that is because Chrome browser has both 'Chrome' and 'Safari' inside of userAgent, however Safari browser has 'Safari' only. In your case you want to identify 'Safari' browser only. In order to do that I needed to check userAgent for 'Safari' but exclude 'Chrome', this way it will guarantee Safari browsers only.

Upvotes: 4

Related Questions