0

我有一个带有 Jquery 验证脚本的简单联系提交表单，它应该告诉用户那里的提交是成功还是失败并显示错误。我遇到的问题是提交正在进行，但我没有收到验证消息。这是代码。

http://jsfiddle.net/62dj5/

            <form class="cmxform" id="CommentForm" method="post" action="#">
                    <input type="text" name="ContactName" id="ContactName" placeholder="Name" />         
                    <input type="text" name="ContactEmail" id="ContactEmail" placeholder="Email" />     
                    <input type="text" name="ContactNumber" id="ContactNumber" placeholder="Phone Number" />         
                    <input type="text" name="ContactCompany" id="ContactCompany" placeholder="Company Name" />      
                    <input type="text" name="EventCity"  id="EventCity" placeholder=" Event City" />         
                    <input type="text" name="EventState" id="EventState"  placeholder="Event State" />          
                <p class="text">  
                    <textarea name="ContactComment" id="ContactComment" placeholder="Enter your message here"></textarea>  
                </p>  
                <p class="submit">  
                    <input type="submit" value="Send" />  
                </p>  
                <label id="loader" style="display:none;"><img src="images/ajax-loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
                <input class="" type="hidden" name="subject" value="Website Contact Form" />
            </form>  



            result = '';
            c = '';
            if (response === 'success') { 
                result = 'Your message has been sent. Thank you!';  
                c = 'success';
            } else {
                result = response;
                c = 'error';
            }

            note.removeClass('success').removeClass('error').text('');
            var i = setInterval(function() {
                if ( !note.is(':visible') ) {
                    note.html(result).addClass(c).slideDown('fast');
                    clearInterval(i);
                }
            }, 40);
4

1 回答 1

1

这是一个示例，只是为了给您一个如何进行验证的示例。看起来您的脚本中引用了两种不同的形式；#CommentForm因此#subscribeForm，目前还不清楚您要做什么，这使得帮助您解决提交问题变得困难。

这是我放在 jsfiddle 上的示例的完整代码。请记住，这是供参考，剪切和粘贴此示例不会解决您的问题（特别是因为看起来您在服务器端验证发生后尝试输出成功/失败消息）。请花一些时间查看jqueryvalidation.org上的文档

$('#CommentForm').validate({
  errorClass: 'validation-error',
  rules: {
    name: {
      required: true,
      minlength: 3
    },
    email: {
      required: true,
      email: true
    },
    phone: {
      required: true,
      phoneUS: true
    },
    company: {
      required: true,
      minlength: 3
    },
    city: {
      required: true,
      minlength: 3
    },
    state: {
      required: true,
      stateUS: true,
      minlength: 2
    },
    message: {
      required: true,
      minlength: 20
    }
  },
  messages: {
    name: {
      required: "Please enter your full name!"
    },
    email: {
      required: "Please enter your email!",
      email: "Please enter a valid email address"
    },
    phone: {
      required: "Please enter your phone!"
    },
    company: {
      required: "Please enter your company!"
    },
    city: {
      required: "Please enter your city!"
    },
    state: {
      required: "Please enter your state!"
    },
    message: {
      required: "Please enter a short message!"
    }
  }
});

$('#reset').click(function() {
  var validator = $("#CommentForm").validate();
  validator.resetForm();
});
input,
.form-control {
  border-radius: 0;
  box-shadow: none;
  padding: 15px;
  height: 45px;
  font-size: 16px;
  border: 1px solid #F2F2F2;
  vertical-align: middle;
}
textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  border: 1px solid #F2F2F2;
}
.form-control:focus {
  background-color: rgba(74, 185, 255, 0.55);
  border-color: #33342e;
  color: #ffffff;
  box-shadow: 0 0 1px rgba(102, 175, 233, 0.2);
  -webkit-box-shadow: 0 0 1px rgba(102, 175, 233, 0.2);
}
.form-control {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  display: block;
  width: 100%;
  height: 60px;
  padding: 12px 12px;
  margin: 12px 0 12px 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.42857143;
  color: #555;
  text-align: center;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #4AB9FF;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.btn-clear {
  color: #378ABF;
  background-color: #fff;
  border-color: #42A6E5;
  width: 100%;
  height: 60px;
  font-size: 16px;
  font-weight: 500;
  margin: 12px 0 12px 0;
}
.btn-clear:hover,
.btn-clear:focus,
.btn-clear:active,
.btn-clear.active,
.open .dropdown-toggle.btn-clear {
  color: #fff;
  background-color: #E80046;
  border-color: #1c1c1c;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}
.btn-clear:active,
.btn-clear.active,
.open .dropdown-toggle.btn-clear {
  background-image: none;
}
.btn-send {
  color: #fff;
  background-color: #63C1D6;
  border-color: #fff;
  width: 100%;
  height: 60px;
  font-size: 16px;
  font-weight: 500;
  margin: 12px 0 12px 0;
}
.btn-send:hover,
.btn-send:focus,
.btn-send:active,
.btn-send.active,
.open .dropdown-toggle.btn-send {
  color: #fff;
  background-color: #035061;
  border-color: #1c1c1c;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}
.btn-send:active,
.btn-send.active,
.open .dropdown-toggle.btn-send {
  background-image: none;
}
label.validation-error {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  background: rgba(245, 12, 12, 0.75);
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
input.validation-error,
textarea.validation-error,
select.validation-error {
  border: 1px solid #f53660;
}
.alert {
  padding: 10px 5px 20px 5px;
  border: 1px solid #f53660;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.alert.info {
  background: #3194b1;
}
.alert.success {
  background: #749958;
}
.alert.error {
  background: #b55454;
}
.alert.warning {
  background: #978c68;
}
.alert i {
  position: relative;
  top: 5px;
  margin-right: 10px;
  font-size: 32px;
}
.alert.info i {
  color: #fff;
}
.alert.success i {
  color: #fff;
}
.alert.error i {
  color: #fff;
}
.alert.warning i {
  color: #fff;
}
#formstatus {
  padding-top: 10px;
}
label.validation-error {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  background: rgba(245, 12, 12, 0.75);
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
input.validation-error,
textarea.validation-error,
select.validation-error {
  border: 1px solid #f53660;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="clearfix" id="CommentForm" name="CommentForm" method="post" action="php/comment.php">
    <div class="row">
      <div class="col-md-4">
        <input class="form-control" type="text" name="name" value="" placeholder="Full Name">
        <div class="clearfix"></div>
      </div>
      <div class="col-md-4">
        <input class="form-control" type="email" name="email" value="" placeholder="Email">
        <div class="clearfix"></div>
      </div>
      <div class="col-md-4">
        <input class="form-control" type="tel" name="phone" value="" placeholder="Telephone">
        <div class="clearfix"></div>
      </div>
    </div>
    <!--endrow-->
    <div class="row">
      <div class="col-md-4">
        <input class="form-control" type="text" name="company" value="" placeholder="Company">
        <div class="clearfix"></div>
      </div>
      <div class="col-md-4">
        <input class="form-control" type="text" name="city" value="" placeholder="City">
        <div class="clearfix"></div>
      </div>
      <div class="col-md-4">
        <input class="form-control" type="text" name="state" value="" placeholder="State">
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <textarea class="form-control" id="message" name="message" value="" rows="5" placeholder="Enter your message..."></textarea>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <input class="btn btn-send" type="submit" value="Send">
        <div class="clearfix"></div>
      </div>
      <div class="col-md-6">
        <input class="btn btn-clear" type="reset" id="reset" onClick="CommentForm.reset();" value="Clear Form" readonly>
        <div class="clearfix"></div>
      </div>
    </div>
    <!--end row-->
    <div id="formstatus"></div>
  </form>
</div>

于 2015-07-02T20:39:32.863 回答