Как подтвердить форму

-2

У меня есть html-форма, в которой вводятся имя пользователя и пароль. Нажатие кнопки, называет функцию js, которая асинхронно ударяет апи. До этого, как бы я проверить егоКак подтвердить форму

<form> 
     <div><label id="resultString"></label></div> 
     <fieldset> 
      <legend>Login</legend> 
      Username: <input type="text" id="username"><br><br> 
      Password: <input type="password" id="password"><br><br> 
      <input type="button" onclick="submitdetails();" value="Login"> 
     </fieldset> 
    </form>

Моя функция JS является:

function submitdetails() { 
    var username = document.getElementById("username").value; 
    var password = document.getElementById("password").value; 
    var params = JSON.stringify({ username: username, password: password }); 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
      if (xmlhttp.status == 200) 
      document.getElementById("resultString").innerHTML = xmlhttp.responseText; 
     else 
      document.getElementById("resultString").innerHTML = "Error"; 
     } 
    }; 
    xmlhttp.open("POST","http://127.0.0.1:8000/login/",true);  
    xmlhttp.send(params); 
}

источник

2017-01-25 Pravin Bhasker

использовать JQuery плагин валидатор. –

Из самой функции javascript вы можете проверить детали. – sureshkumar

Перед тем, как задать вопрос, прочтите [help/on-topic]. Вы просите API, который НЕ относится к теме – AxelH

<script> 
function submitdetails() { 
var username = $("#username").val(); 
    var password = $("#passwords").val(); 
if(username==""||password=="") 
{ 
alert("please fill"); 
} 
var params = JSON.stringify({ username: username, password: password }); 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
     if (xmlhttp.status == 200) 
     document.getElementById("resultString").innerHTML = xmlhttp.responseText; 
    else 
     document.getElementById("resultString").innerHTML = "Error"; 
    } 
}; 
xmlhttp.open("POST","http://127.0.0.1:8000/login/",true);  
xmlhttp.send(params);

}

источник

2017-01-25 07:22:19

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function validateForm() { 
    var x = document.forms["myForm"]["fname"].value; 
    var y = document.forms["myForm"]["email"].value; 
    if (x == "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.email.value)) 
    { 
    return (true) 
    } 
    alert("You have entered an invalid email address!") 
    return (false) 
} 


</script> 
</head> 
<body> 

<form name="myForm" action="demo_form.asp" 
onsubmit="return validateForm()" method="post"> 
Name: <input type="text" name="fname"> 
<br/> 
email: <input type="text" name="email"> 
<br/> 
<input type="submit" value="Submit"> 
</form> 

</body> 
</html>

Но его легко использовать использование JQuery проверки Plugin

Demo: https://jqueryvalidation.org/files/demo/

Документация: https://jqueryvalidation.org/documentation/

образец кода -

$("#signupForm").validate({ 
     rules: { 
      firstname: "required", 
      lastname: "required", 
      username: { 
       required: true, 
       minlength: 2 
      }, 
      password: { 
       required: true, 
       minlength: 5 
      }, 
      confirm_password: { 
       required: true, 
       minlength: 5, 
       equalTo: "#password" 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      topic: { 
       required: "#newsletter:checked", 
       minlength: 2 
      }, 
      agree: "required" 
     }, 
     messages: { 
      firstname: "Please enter your firstname", 
      lastname: "Please enter your lastname", 
      username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 
      password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long" 
      }, 
      confirm_password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long", 
       equalTo: "Please enter the same password as above" 
      }, 
      email: "Please enter a valid email address", 
      agree: "Please accept our policy" 
     } 
    });

источник

2017-01-25 06:23:03

. Я бы точно не сказал, что OP не хочет/не принимает использование JQuery;) – AxelH

okay i update my answer pls check –

Вопрос отмечен как javascript, а не jQuery. – Rob

<form id='form' name='form' method='post' action=''> 
     <div><label id="resultString"></label></div> 
     <fieldset> 
      <legend>Login</legend> 
      Username: <input type="text" id="username" name="username"><br><br> 
      Password: <input type="password" id="password" name="password"><br><br> 
      <input type="button" value="Login"> 
     </fieldset> 
    </form>

И это код валидатор плагин:

$(document).ready(function() { 

    $('#form').validate({ 
    rules: { 
     username: { 
     required: true 
     }, 
     password: { 
     required: true 
     } 

    }, 
    highlight: function(element) { 
     $(element).closest('.form-control').removeClass('success').addClass('error'); 
    }, 
    success: function(element) { 

     $(element).closest('.form-control').removeClass('error').addClass('success'); 
    } 
    }); 
});

относятся: https://jqueryvalidation.org/

DEMO

вещей, чтобы помнить

форма должна иметь имя и идентификатор
я говорю, дайте имя и идентификатор для всех полей, а также
Использование представить обработчик, чтобы сделать вызов, который вы сделали на OnClick

источник

2017-01-25 06:23:45

Я бы точно не сказал, что OP не хочет/не принимает JQuery;) – AxelH

Тег для javascript, а не jQuery. Вы знаете, как записать это в javascript? – Rob

с использованием следующих условий

if(username ==null || username =="") 
{ 
document.getEelementById("showerr").innerHTML = "is empty"; 
} 
if(password==null || password =="" password.length < 6) 
{ 
document.getEelementById("showerr").innerHTML = "must 6 or above characters"; 
}

HTML:

<span id="showerr"></span>

с помощью регулярных выражений можно проверить

http://jsfiddle.net/ghvj4gy9/embedded/result,js/

источник

2017-01-25 06:25:15

Как подтвердить форму

ответ

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