的onsubmit不叫

我有一个表格：密码的onsubmit不叫

<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处理程序的问题？

来源

2017-10-07 Валерий Герасимов

#PasswordChange表单？这个ID在哪里？ – Pedram

@pedram它是一个更高一点的Modal Window的id，这个表单位于哪里。是不是重要？在firefox控制台中，这个commnad将预期结果作为表单。 –

是啊有点重要，请查看下面的答案以找出 – Pedram

使用此：

onsubmit="return submit(this)"

来源

2017-10-07 12:32:11

谢谢，我认为我需要传递jQuery对象，因为我期望在提交方法中使用jQuery方法。现在我改变了它，但问题依然存在。 –

虽然这段代码可能会回答这个问题，但提供关于**如何**和**为什么**的附加上下文会解决问题，这将提高答案的长期价值。 – Alexander

请提交更改函数名，因为它是关键字所以它不能使用它。也删除下一</input>提交按钮

来源

2017-10-07 12:33:36 Jinesh

谢谢，但问题仍然存在。 –

有很多问题：

变化value到val
使用另一个名称提交功能，它有点保留的$('#PasswordChange form')
使用this代替
使用var first_pass = $('.first_try');而不是find
你忘了写else
，你需要使用event.preventDefault();来停止刷新页面或submiting页。

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

来源

2017-10-07 12:52:26 Pedram

谢谢。我认为我不能使用$（'。first_try'）。因为我拥有同一班级的其他元素。在这个页面上以不同的形式（如密码更改，注册，我们必须以相同的方式检查输入的密码）。另外我不能使用ID而不是类，因为我期望脚本使用不同的表单来处理相同的行为。包含这些类的输入。什么可以作为解决方案？ –

是的，查看更新的答案。你可以使用这个'form.querySelector（'。first_try'）' – Pedram

使用此代码

<!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>

来源

2017-10-07 12:55:46 Jinesh

，如果你不需要取消提交操作，则不应返回任何东西。您也可以使用提交表单事件处理程序与jQuery .submit()方法而不是onsubmit属性中的hanler定义。

$("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>

此外，我建议你使用引导程序验证的状态，而不是输入的边框样式设置。

来源

2018-01-14 10:20:46 Alexander

的onsubmit不叫

回答

相关问题