CODEWITHSUNDEEP
phpjavascriptjqueryhtmljquery-validate
Lieutenant Dan
Lieutenant Dan

Reputation: 8294

getting validate.js to work

I'm having trouble getting my simple contact form to validate and am not sure what I'm doing wrong, I've stripped the code almost exactly out of a stand alone demo and followed the tut. What's wrong with my code?

Tut & demo

In the head: Updated Attempt

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

Initiating, almost right before the closing </head>

<script type="text/javascript">
  SubmittingForm=function() {
    alert("The form has been validated.");
  }

  $(document).ready(function() {
    $("#fvujq-form1").validate({
      submitHandler:function(form) {
        SubmittingForm();
      },
      rules: {
        name: "required", // simple rule, converted to {required:true}
        email: {          // compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
      },
      messages: {
        comment: "Please enter a comment."
      }
    });
  });

  jQuery.validator.addMethod(
    "selectNone",
    function(value, element) {
      if (element.value == "none") {
        return false;
      }
      else return true;
    },
    "Please select an option."
  );

  $(document).ready(function() {
    $("#fvujq-form2").validate({
      submitHandler:function(form) {
        SubmittingForm();
      },
      rules: {
        sport: {
          selectNone: true
        }
      }
    });
  });
</script>

Close to the bottom of page, form markup:

<p style="font-style:italic; font-size:12px; font-weigh: normal; margin-top: -89px;     margin-left: 33px;">Contact me written in a different language.</p> <img src="http://www.cameroncashwell.com/imgs/pointing-left.png" style="float: right; margin-right: 140px; margin-top: -89px;">

<div class="form-div"> 
    <form id="fvujq-form1" style="font-size:22px; color:#333;" method="post" action="">
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
      <div class="form-row"><span class="label">Your Comment *</span><textarea name="comment"></textarea></div>
      <div class="form-row"><input class="submit" type="submit" value="Submit"></div>
    </form>
</div>

Also - where would I call my email address for the contact form's contents to be sent?

Upvotes: 2

Views: 865

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126082

You have a couple of problems:

  1. Your link to the Validate plugin is broken. Try using one from a CDN (like Microsoft's) instead: 

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

  2. Decide which version of jQuery you want to use. Right now, you're loading 1.3.2 (a pretty old version) and the latest version (1.7.1). I would stick with the latest version unless you have a specific reason not to. Here it's also smart to use a CDN:

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

  3. Make sure the scripts are loaded in the right order (jQuery, then jQuery Validate). If you place validate before jQuery, your validate code will not work:

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Besides those issues, your actual JavaScript looks good.

Upvotes: 2

Related Questions