Проверка OnBlur Требуется кнопка Onsubmit, которую нужно дважды щелкнуть в Pure Javascript

У меня есть форма, которая проверяет пароль null/blank или не использует onblur. И я использую кнопку отправки, чтобы отправить форму. Однако перед тем, как работать, дважды нажмите кнопку «Отправить». Это не работает при первом щелчке после того, как что-то было заполнено в поле пароля. Ниже приведен код.Проверка OnBlur Требуется кнопка Onsubmit, которую нужно дважды щелкнуть в Pure Javascript

Что касается JQuery, мне требуется решение в чистом Javascript.

Я пробовал onkeyup, но это нехорошее решение, так как это наложит напряжение на систему и сервер (для ajax).

<!DOCTYPE html> 
<html> 
    <body> 

    <script> 

     var error_user_password = false; 

     function checkpw(){ 

     var user_password = document.forms["joinform"]["user_password"].value; 
     if (user_password == null || user_password == "") { 
      text = "Password : Required"; 
      document.getElementById("errormsg4").innerHTML = text; 
      error_user_password = false; 

     } else { 
      document.getElementById("errormsg4").innerHTML = ""; 
      error_user_password = true; 

     } 
     } 

     function submitall() { 

     checkpw() 
     if(error_user_password == false) { 
      return false; 
     } else { 
      return true 
     } 
     } 
    </script> 

    </body> 
    <form id="joinform" method="post" name="joinform" action="#hello" onsubmit="return submitall()" > 
    <h2>Join</h2> 

    <input type="password" name="user_password" id="user_password" placeholder="Password" onblur="checkpw()" /> 
    <div class ="errormsg" id ="errormsg4"></div><br> 
    <input type="submit" name="join" id="join" value="Submit" ><br><br> 

    </form> 

</html>

источник

2016-08-29 DragonFire

Вы могли бы назвать checkpw() в submitall()? Поэтому он всегда проверяется прямо перед тем, как вы решите отправить (а также на размытие). –

Зачем нужен другой 'validatepassword()'? Вызывайте одну и ту же функцию для 'onblur' и form' submit' и возвращаете проверку 'true' или' false'. Кроме того, лучше использовать 'onchange', чем' onblur' на входе (изменение происходит до размытия). – skobaljic

@skobaljic У меня есть несколько функций, таких как checkpw(), которые я вызываю в submitall(), код, который я опубликовал, для простоты. – DragonFire

ONBLUR Validation Требуется Onsubmit Кнопка будет нажата два раза в Pure Javascript

Это происходит потому, что событие размытость захватывается из обработчика событий ONBLUR и не продувают в форме кнопку отправки.

Полное решение JavaScript основан на:

addEventListener
activeElement: внутри события размытия проверить после 10 миллисекунд, если кнопка отправить получить фокус.

Мой фрагмент:

var error_user_password = false; 
 

 
function checkpw(ele, e){ 
 
    var user_password = document.forms["joinform"]["user_password"].value; 
 

 
    if (user_password == null || user_password == "") { 
 
    text = "Password : Required"; 
 
    document.getElementById("errormsg4").innerHTML = text; 
 
    error_user_password = false; 
 
    } else { 
 
    document.getElementById("errormsg4").innerHTML = ""; 
 
    error_user_password = true; 
 
    } 
 
} 
 

 
function submitall(ele, e) { 
 
    checkpw(); 
 

 
    if(error_user_password == false) { 
 
    e.preventDefault(); 
 
    } else { 
 
    console.log('form submitted'); 
 
    } 
 
} 
 

 
window.addEventListener('DOMContentLoaded', function(e) { 
 
    document.getElementById('user_password').addEventListener('blur', function(e) { 
 
    checkpw(this, e); 
 
    setTimeout(function() { 
 
     if (document.activeElement.id == 'join') { 
 
     document.activeElement.click(); 
 
     } 
 
    }, 10); 
 
    }, false); 
 
    document.getElementById('joinform').addEventListener('submit', function(e) { 
 
    submitall(this, e); 
 
    }, false); 
 
});

<form id="joinform" method="post" name="joinform" action="#hello"> 
 
    <h2>Join</h2> 
 

 
    <input type="password" name="user_password" id="user_password" placeholder="Password"/> 
 
    <div class ="errormsg" id ="errormsg4"></div><br> 
 
    <input type="submit" name="join" id="join" value="Submit" ><br><br> 
 

 
</form>

источник

2016-08-29 14:02:30 gaetanoM

plus 1 (в настоящее время нет репутации для голосования) – DragonFire

привет, я пытаюсь реализовать ваше решение в jquery, но его не работает, вы можете помочь мне, спасибо ... пожалуйста, посмотрите эту ссылку: http: // stackoverflow.com/questions/42707047/jquery-ajax-form-requires-2-clicks-to-submit – DragonFire

Проверка OnBlur Требуется кнопка Onsubmit, которую нужно дважды щелкнуть в Pure Javascript

ответ

Смежные вопросы