Question

在_form.html.erb

中

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <%= form_for(user, :html=>{:class=>'user_form_validation'}) do |f| %>
       <div class="field">
          <%= f.label :first_name %>
          <%= f.text_field :first_name%>
          <p id="first_name_error"></p>
       </div>

       <div class="field">
          <%= f.label :last_name %>
          <%= f.text_field :last_name%>
          <p id="last_name_error"></p>
       </div>
       <div class="actions">
          <%= f.submit "Create",:id => "submit_button" %>
       </div>
    <% end%>
    <script type="text/javascript">
      $(document).ready(function(){
          $('.user_form_validation').validate({
            alert($('#user_first_name'.val());
            errorPlacement: function(error, element) {
      $(element).closest('div').append(error);
    },
    onfocusin: function(element) {          
      this.lastActive = element;
      if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {          
        this.addWrapper(this.errorsFor(element)).hide();
      }
    },
    onfocusout: function(element) {         
      if ( !this.checkable(element) ) {
        this.element(element);
      }
    },
    onkeyup: function(element) {         
      this.element(element);
      if (element.name == 'user[first_name]' && element.value != ""){
        $('#first_name_error').addClass('valid');
      }else{
        $('#first_name_error').removeClass('valid');
      } 
      if (element.name == 'user[last_name]' && element.value != ""){
        $('#last_name_error').addClass('valid');
      }else{
        $('#last_name_error').removeClass('valid');
      }
    },
    rules : {
      "user[first_name]" : {
        required : true
      },
      "user[last_name]" : {
        required : true
      },
    },
    messages : {
      "user[first_name]" : {
        required : "Please enter your name."
      },
      "user[last_name]" : {
        required : "Please enter your name."
      }
    }
          });
        });
    </script>

<style>
.error{
    color: red;
  }

  p.valid {
    background: url('../assets/success.png') left -1px no-repeat;
    padding: 0 0 0 20px;
    margin: 0 0 0 0px;
    font-size: 14px;
    color: #666;
    line-height: 15px;
    height: 15px;
  }

  label.error {
    background: url('../assets/error.png') left -1px no-repeat;
    padding: 0 0 0 20px;
    margin: 0 0 0 0px;
    font-size: 14px;
    color: #792121;
    line-height: 15px;
    height: 15px;
  }

</style>

提交表单后，它没有提供任何警报，并且在控制台中显示未捕获的SyntaxError：意外的字符串表示警报，并且没有显示first_name和last_name的任何错误消息。

Answer 1

而是使用内置方法，如：

$('.user_form_validation').validate({
    submitHandler: function(form) {
       alert($('#user_first_name').val());
    }
});

问题是您在javascript对象文字中发出警告：

{
 alert($('#user_first_name').val());
}

因为已将.validate()方法分配给jquery对象，并且此方法将对象作为参数。哪个应该是具有键和值的对象。

Answer 2

尝试这样。validate()函数验证表单。提醒字段值。您可以使用jquery事件。如下所示。单击提交按钮..e

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <%= form_for(user, :html=>{:class=>'user_form_validation'}) do |f| %>
       <div class="field">
          <%= f.label :first_name %>
          <%= f.text_field :first_name%>
       </div>

       <div class="field">
          <%= f.label :last_name %>
          <%= f.text_field :last_name%>
       </div>
       <div class="actions">
          <%= f.submit "Create",:id => "submit_button" %>
       </div>
    <% end%>
    <script type="text/javascript">
      $(document).ready(function(){
          $('#submit_button').click(function(){
            alert($('#user_first_name').val());
          });
        });
    </script>

如果你想验证你的表单，试试这个..小提琴 http://jsfiddle.net/xs5vrrso/ 和

http://jsfiddle.net/xs5vrrso/4018/

未捕获的SyntaxError：jquery中的意外字符串

2 个答案: