current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
1  
You did add the attributeSupported function, didn't you? I'm guessing if you look at your console, you'll see that attributeSupported is not a function. –  Ethan Brown May 30 at 21:11
    
On the website it refers to some jQuery? Is that where attributeSupported is from? I'm new to this so i really haven't a clue about these functions. @EthanBrown –  MistUnleashed May 30 at 21:40
    
Please provide your HTML code –  Vlad Bezden May 31 at 1:20
    
@MistUnleashed, please check my updated reply. I also added working example for you. –  Vlad Bezden Jun 4 at 13:41
    
@MistUnleashed please take a look. I added answer to your question. –  Vlad Bezden Jun 5 at 12:29

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
    
So where it says '#formTemplate' i don't need to change that? My form hasn't got a name so do i need to add one? @Vlad –  MistUnleashed May 30 at 22:27
    
yes, you should have id="formTemplate", please notice you should not have '#' in form id. '#' is for jQuery to find element by id –  Vlad Bezden May 30 at 22:30
    
also I would recommend you to run debugger and check if there is any other issue. In order to do that I would recommend run your code in Chrome and after you open your page press F12. Open Source tab and open your JavaScript file. Put breakpoint on the first and second line of your JavaScript code and press on submit code. In this case you should hit second breakpoint. If not press F5 and reload your page and see if your code will stop on first page. If not probably you forgot to reference your JavaScript code from HTML page. –  Vlad Bezden May 30 at 22:43
    
Also when you open "developer tool" by pressing F12, first thing check if you have any red flags/errors. –  Vlad Bezden May 30 at 22:45
    
Here is an example on how to add id to your form <form id="formTemplate">...</form> –  Vlad Bezden May 30 at 22:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.