在表单中提交时未调用

我有下一个形式：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submit(form) {
        var first_pass = form.find('.first_try');
        var second_pass = form.find('.second_try');
        if (first_pass.value == second_pass.value) {
            return true
        }
        first_pass.value = '';
        second_pass.value = '';
        first_pass.attr('placeholder', 'Пароли не совпадают');
        first_pass.css('border-color', 'red');
        second_pass.css('border-color', 'red');
    
        return false
    }
</script>
<form role="form" method="post" onsubmit="return submit($('#PasswordChange form'))">
    <h3>Редактирование пользователя</h3>
    <div class="form-group">
        <input type="password" class="form-control first_try" name="password"
               placeholder="Новый пароль"
               required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control second_try" name="password"
               placeholder="Повтор пароля"
               required>
    </div>
   
    <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></input>
</form>

此脚本检查密码是否相同。

但是使用Firefox调试器我找不到它进入这种方法。

这是脚本的问题吗？还是声明提交处理程序有问题？

有很多问题：

将value更改为val
提交功能使用另一个名称，它有点保留
使用this而不是$('#PasswordChange form')
使用var first_pass = $('.first_try');而不是find
你忘了写else
并且您需要使用event.preventDefault();停止刷新页面或提交页面。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function save(form) {
        var first_pass = form.querySelector('.first_try');
        var second_pass = form.querySelector('.second_try');
        if (first_pass.value == second_pass.value) {
            alert('its ok');
            return true;
        } else {
        first_pass.value = '';
        second_pass.value = '';
        first_pass.placeholder = 'Пароли не совпадают';
        first_pass.style.borderColor='red'; 
        second_pass.style.borderColor='red'; 
    
        return false
    }
    }
</script>
<form role="form" method="post" onsubmit="event.preventDefault(); return save(this)">
    <h3>Редактирование пользователя</h3>
    <div class="form-group">
        <input type="password" class="form-control first_try" name="password"
               placeholder="Новый пароль"
               required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control second_try" name="password"
               placeholder="Повтор пароля"
               required>
    </div>
   
    <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"/>
</form>

使用此代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    function submitData(form) {
      var first_pass = form.find('.first_try');
      var second_pass = form.find('.second_try');
      if (first_pass.value == second_pass.value) {
        return true
      }
      first_pass.value = '';
      second_pass.value = '';
      first_pass.attr('placeholder', 'Пароли не совпадают');
      first_pass.css('border-color', 'red');
      second_pass.css('border-color', 'red');
      return false
    }
  </script>
</head>
<body>
  <form role="form" method="post" onsubmit="return submitData($('#PasswordChange form'))">
    <h3>Редактирование пользователя</h3>
    <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required></div>
    <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required></div><input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></form>
</body>
</html>

请更改提交函数名称，因为它是关键字，因此不使用它。同时删除提交按钮旁边的</input>

使用这个：

onsubmit="return submit(this)"

如果您不需要取消提交操作，则不应返回任何内容。此外，您还可以将提交表单事件处理程序与 jQuery .submit() 方法一起使用，而不是 onsubmit 属性中的汉勒定义。

$("form").submit(function(e) {
  var passwords = $('[name=password]');
  if (passwords.eq(0).val() !== passwords.eq(1).val()) {
    alert("Пароли не совпадают!");
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="post" action="/">
  <h3>Редактирование пользователя</h3>
  <div class="form-group">
    <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required >
  </div>
  <div class="form-group">
    <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required />
  </div>
  <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить" />
</form>

此外，我建议您使用 Bootstrap 验证状态而不是输入的边框样式设置。

相关内容

最新更新

热门标签：