模态对话框中的验证警报

Question

我的 Node-Express-Mongoose 应用程序中有一个用户列表。我需要单击更新链接以打开模式并通过单击模式上的保存更改按钮来更新用户信息。截图如下：

每当我在没有任何信息的模式下提交表单时，它都不会提醒我。 以下是相同的javascript：

$(document)
  .on('click', '.update_user', function(e) { //click on update link
    e.preventDefault();
    $('#edit_user').unbind('click');
    $('#edit_user').click(function() { //click on save changes button


      var user_name = $("#input_name").val();
      var user_age = $("#input_age").val();

      if (user_name == '' && user_age == '') {
        alert("Please Fill All Required Fields");
        return false;
      }

      var user_data = {
        user_name: user_name,
        user_age: user_age
      };


      $.ajax({
        url: '/users/update_user',
        type: 'post',
        ContentType: 'application/json',
        data: JSON.stringify(user_data),
        success: function(data, textStatus, jQxhr) {
          console.log(data);
          load_users();
        },
        error: function(jqXhr, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });

    });

  });

这是 EJS 文件：

<div aria-labelledby="myModalLabel" class="modal fade" id="openModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title" id="myModalLabel">Update User :</h4>
      </div>


      <div class="modal-body">

        <!--		<form>
										Name:<input id="nameId" name="modal_username" type="text" value="" size="40"> <br>Age:<input id="ageId" size="3" name="modal_age" type="number" value="">
									</form> -->


        <form role="form">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" id="input_name" placeholder="Enter name" />
          </div>
          <div class="form-group">
            <label>Age</label>
            <input type="number" class="form-control" id="input_age" placeholder="Age" />
          </div>
        </form>

      </div>


      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" id="edit_user" type="submit">Save changes</button>
      </div>
    </div>
  </div>
</div>


<li>
  <%= userlist[i].name %>:
    <%= userlist[i].age %> <a class="delete_user" data-id="<%= userlist[i]._id %>" href="#" id="delete" title="Delete this User">Delete</a> || <a href="#openModal" class="update_user" data-target="#openModal" data-toggle="modal" id="update" title="Update user info" data-id="<%= userlist[i]._id %>">Update</a>
</li>
<%} %>

问题出在哪里？

Answer 1

使用这个

$(".update").click(function (e) {
e.preventDefault();
    $('#edit_user').unbind('click');
    $('#edit_user').click(function() { //click on save changes button


      var user_name = $("#input_name").val();
      var user_age = $("#input_age").val();

      if (user_name == '' && user_age == '') {
        alert("Please Fill All Required Fields");
        return false;
      }

      var user_data = {
        user_name: user_name,
        user_age: user_age
      };


      $.ajax({
        url: '/users/update_user',
        type: 'post',
        ContentType: 'application/json',
        data: JSON.stringify(user_data),
        success: function(data, textStatus, jQxhr) {
          console.log(data);
          load_users();
        },
        error: function(jqXhr, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });

    });

});

希望对你有帮助