заставить validate.js работать

Question

У меня проблемы с получением моей простой контактной формы для проверки, и я не уверен, что делаю не так, я почти полностью удалил код из автономной демонстрации и следовал за тобой. Что не так с моим кодом?

Tut & demo

В голове: Обновлена ​​попытка

<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>

Начало, почти прямо перед закрытием </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>

Внизу страницы, разметка формы:

<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>

Также - куда мне позвонить по адресу электронной почты для отправки содержимого контактной формы?

Answer 1

У вас есть пара проблем:

1. Ваша ссылка на плагин Validate не работает. Попробуйте использовать один из CDN (например, Microsoft) вместо:

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

2. Решите, какую версию jQuery вы хотите использовать. Прямо сейчас вы загружаете 1.3.2 (довольно старая версия) и последнюю версию (1.7.1). Я бы придерживался последней версии, если у вас нет особых причин не делать этого. Здесь также разумно использовать CDN:

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

3. Убедитесь, что скрипты загружены в правильном порядке (jQuery, затем jQuery Validate). Если вы разместите команду validate перед jQuery, ваш код проверки не будет работать:

   <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>
   

Помимо этих проблем, ваш настоящий JavaScript выглядит хорошо.