Question

无论我输入什么，回复都是＆＃34;输入正确的电子邮件＆＃34;或＆＃34;正确的名称＆＃34;但是当我点击save时，总会创建一个新用户。

<form id="dialogform" title="Edit User" action="">
  <div class="edit">
    <div>
      <div id="dataEdit">
        <div>Name</div>
        <input class="name input" type="text" name="name" minlength="2" type="text" required aria-required="true">
        <div>Email</div>
        <input class="mail input" type="email" name="email" required aria-required="true">
      </div>
    </div>
  </div>
</form>
<form id="dialogNewUser" title="New User" action="">
  <div class="edit">
    <div>
      <div id="dataNew">
        <label> Name</label>
        <input class="name input" name="name" minlength="2" type="text" required aria-required="true">
        <label>Email</label>
        <input class="mail input" type="email" name="email" required aria-required="true">
      </div>
    </div>
  </div>
</form>

http://jsfiddle.net/RobDee/rvpvwgza/4

Answer 1

你需要使用if（$（＆＃39;＃dialogNewUser＆＃39;）。valid（））{/ *代码需要在validatin之后执行* / } 检查以下功能。希望这有帮助

    function saveNew() {
  if($('#dialogNewUser').valid()){
  var n = $('#dataNew');
  var nn = n.find('.name').val();
  var mn = n.find('.mail').val();
  var row = $('#mylist').data('currentrow');
  row = row === "" || row === undefined ? "" : row;
  if (row === "") {
    addRow(nn, mn, "");

  } else {
    var r = $('#mylist').find('tbody').find('tr').eq(row);
    var name = r.find('.name');
    var mail = r.find('.mail');
    name.text(nn);
    mail.text(mn);

  }
  NewUser.dialog("close");
  }
}

＆＃13;

'use strict';

var myajax = $.ajax({
  type: 'GET',
  url: 'people.json',
  datatype: 'json'
});
myajax.done(function(data) {
  for (var i in data.people) {
    var name = data.people[i].imię + " " + data.people[i].nazwisko;
    var mail = data.people[i].mail;
    var ico = data.people[i].ico;
    addRow(name, mail, ico);
  }
});
$('#mylist').on('click', '.ddledit', function() {
  var r = $(this).parents('tr');
  $('#mylist').data('currentrow', r.index());
  var n = r.find('.name').text();
  var m = r.find('.mail').text();
  var d = $('#dataEdit');
  d.find('.name').val(n);
  d.find('.mail').val(m);
  dialog.dialog("open");
});


function addRow(name, mail, ico) {
  var tr = "<tr ></tr>";
  var ddl = '<td ><span class="ico"></span><div class="ddlactions dropdown"><button class="btn btn-default dropdown-toggle" ' +
    'type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="caret"></span>' +
    '</button><ul class="dropdown-menu"><li><a class="ddledit" href="#">Edit</a></li><li><a class="ddlremove" href="#">Remove</a>' +
    '</li></ul></div></td>';

  var pn = "";
  var pm = "";
  var $tr = $(tr);
  pn += '<td class="name" >' + name + '</td>';
  pm += '<td class="mail" >' + mail + '</td>';
  var z = $(ddl);
  z.find('.ico').html(ico);
  $tr.append(pn + pm);
  z.appendTo($tr);
  $tr.appendTo('tbody');
}



var dialog;
var NewUser;
$(function() {
  dialog = $("#dialogform").dialog({
    autoOpen: false,
    width: 350,
    position: {
      my: "center top",
      at: "center top ",
      of: window
    },

    modal: true, //disable other items on the page
    buttons: {
      "Save": saveEdit,
      "Cancel": function() {
        dialog.dialog("close");
      }
    },
    close: function() {
      $('#dialogform')[0].reset();
      $('#mylist').data('currentrow', "");

    }
  });

  NewUser = $("#dialogNewUser").dialog({
    autoOpen: false,
    width: 350,
    position: {
      my: "center top",
      at: "center top ",
      of: window
    },

    modal: true,
    buttons: {
      "Save": saveNew,
      "Cancel": function() {
        NewUser.dialog("close");
      }
    },
    close: function() {
      $('#dialogNewUser')[0].reset();
      $('#mylist').data('currentrow', "");

    }
  });
});



function saveEdit() {
  var d = $('#dataEdit');
  var nd = d.find('.name').val();
  var md = d.find('.mail').val();

  var row = $('#mylist').data('currentrow');
  row = row === "" || row === undefined ? "" : row;
  if (row === "") {
    addRow(nd, md, "");
  } else {
    var r = $('#mylist').find('tbody').find('tr').eq(row);
    var n = r.find('.name');
    var m = r.find('.mail');
    n.text(nd);
    m.text(md);
  }
  dialog.dialog("close");
}

$(function() {
  $("#createnew").button().on("click", function() {
    NewUser.dialog("open");
  })

});

function saveNew() {
  
if($('#dialogNewUser').valid()){
  var n = $('#dataNew');
  var nn = n.find('.name').val();
  var mn = n.find('.mail').val();
  var row = $('#mylist').data('currentrow');
  row = row === "" || row === undefined ? "" : row;
  if (row === "") {
    addRow(nn, mn, "");

  } else {
    var r = $('#mylist').find('tbody').find('tr').eq(row);
    var name = r.find('.name');
    var mail = r.find('.mail');
    name.text(nn);
    mail.text(mn);

  }
  NewUser.dialog("close");
  }
}

$(function() {
  $("#dialogNewUser").validate();
  $("#dialogform").validate();
});

＆＃13;

<body>
  <div class="container">
    <table id="mylist" class="table  table-striped">
      <thead class="thead-default">
        <tr>
          <th class="ahead"> <span>Name</span> 
          </th>
          <th class="ahead" id="headMail"> <span>Email</span> 
          </th>
          <th class="ahead" id="headAction"> <span>Actions</span> 
          </th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
  <button id="createnew" type="button" class="mybutton">Create New</button>
  <form id="dialogform" title="Edit User" action="">
    <div class="edit">
      <div>
        <div id="dataEdit">
          <div>Name</div>
          <input class="name input" type="text" name="name" minlength="2" type="text" required aria-required="true">
          <div>Email</div>
          <input class="mail input" type="email" name="email" required aria-required="true">
        </div>
      </div>
    </div>
  </form>
  <form id="dialogNewUser" title="New User" action="">
    <div class="edit">
      <div>
        <div id="dataNew">
          <label>Name</label>
          <input class="name input" name="name" minlength="2" type="text" required aria-required="true" >
          <label>Email</label>
          <input class="mail input" type="email" name="email" required aria-required="true">
        </div>
      </div>
    </div>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
  <script>
  </script>
</body>

＆＃13;

验证使用jQuery插件无法正常工作

1 个答案: