Question

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

每当我在模态中提交表格而没有任何信息时，它都不会提醒我。下面是相同的javascript：

＆＃13;

$(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);
        }
      });

    });

  });

＆＃13;

这是EJS文件：

＆＃13;

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

＆＃13;

问题出在哪里？

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);
        }
      });

    });

});

希望这有帮助

模态对话框中的验证警报

1 个答案: