javascript - 表单中的 Onsubmit 不被调用

Question

我有下一个表格:

<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 调试器我找不到它进入这个方法。

这是脚本的问题吗？还是关于声明 onsubmit 处理程序的问题？

Answer 1

有很多问题:

1. 将 value 更改为 val
2. 提交功能使用另一个名称，有点保留
3. 使用this代替$('#PasswordChange form')
4. 使用 var first_pass = $('.first_try'); 而不是 find
5. 你忘了写else
6. 并且您需要使用 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>