onsubmit sous forme n'a pas appelé

J'ai la forme suivante:onsubmit sous forme n'a pas appelé

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

Ce contrôle de script si les mots de passe sont les mêmes. Mais en utilisant firefox debugger, je ne trouve pas que ça marche dans cette méthode.

Est-ce que ce problème est lié au script? Ou est-ce que le problème est de déclarer le gestionnaire d'onsubmit?

Source

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

# Formulaire de modification de mot de passe? où est cet identifiant? – Pedram

@pedram il est un peu plus haut, id de fenêtre modale, où cette forme située. Est-ce important? Dans la console firefox cette commnad donne le résultat attendu sous forme de formulaire. –

ouais un peu important, vérifiez ma réponse ci-dessous pour savoir – Pedram

Utilisez ceci:

onsubmit="return submit(this)"

Source

2017-10-07 12:32:11

Merci, j'ai pensé que je devais passer l'objet jQuery, car je m'attends à travailler avec les méthodes jQuery dans la méthode submit.Maintenant, je le change, mais les problèmes demeurent. –

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant ** comment ** et ** pourquoi ** il résout le problème améliorerait la valeur à long terme de la réponse. – Alexander

S'il vous plaît changer soumettre le nom de la fonction, car il est des mots clés afin qu'il ne soit pas l'utiliser. Également supprimer </input> à côté de soumettre le bouton

Source

2017-10-07 12:33:36 Jinesh

Merci, mais le problème persiste. –

Il y avait de nombreux problèmes:

changement value à val
utiliser un autre nom pour présenter la fonction, il est réservé un peu
utilisation this au lieu de $('#PasswordChange form')
utiliser var first_pass = $('.first_try'); au lieu de find
vous avez oublié d'écrire else
et vous devez utiliser event.preventDefault(); pour arrêter l'actualisation de la page ou l'envoi de la page.

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

Source

2017-10-07 12:52:26 Pedram

Merci. Je pense que je ne peux pas utiliser seulement $ ('. First_try'). Parce que j'ai d'autres éléments avec la même classe. sur cette page dans différents formulaires (comme le changement de mot de passe, l'enregistrement, partout où nous devons vérifier les mots de passe d'entrée de la même manière). Je ne peux pas utiliser les ID au lieu des classes, car je m'attends au même comportement de la part du script qui travaille avec les formulaires defferent. qui contient des entrées avec de telles classes. Que peut-on présenter comme une solution de la manière? –

Oui, voir la mise à jour de la réponse. vous pouvez utiliser ce 'formulaire.querySelector ('. first_try')' – Pedram

Utilisez ce code

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

Source

2017-10-07 12:55:46 Jinesh

Vous ne devriez pas retourner quoi que ce soit si vous n'avez pas besoin d'annuler l'action d'envoi. Vous pouvez également utiliser le gestionnaire d'événements de formulaire de soumission avec la méthode jQuery .submit() au lieu de la définition de hanler dans l'attribut 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>

Aussi je vous recommande d'utiliser les états de validation Bootstrap au lieu du paramètre de style de bordure d'entrée.

Source

2018-01-14 10:20:46 Alexander

onsubmit sous forme n'a pas appelé

Répondre

Questions connexes