我的JavaScript表单验证功能被调用了两次
[英]My JavaScript form validation function is called two times
问题描述
I am trying to print the value from the form when a user submits the function but a blank value is returned. 
当用户提交函数但返回空值时，我试图从表单中打印值。
Here is my JavaScript code: 这是我的JavaScript代码：
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
And my HTML form as : 和我的HTML形式为：
<body>
<div class="container">
<div class="col-md-8">
<div class="starter-template">
<h1>Login with javascript</h1>
<p class="lead">Please Enter Following Details</p>
<h1 id="demo"></h1>
<form name="form" onSubmit="return login.validation();" action="#" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" name="username" class="form-control" id="Username" placeholder="Please Enter your Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="Email" placeholder="Please enter your Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Re-Password</label>
<input type="password" class="form-control" id="Re-Password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="js/login.js"></script>
<script href="js/bootstrap.js"></script>
<!-- /.container -->
</body>
Why does the value not get into html <p> tag. 为什么值不进入html <p>标记。
2 个解决方案
解决方案1
2 2017-08-15 07:38:03
Your code simply works. 您的代码可以正常工作。 But since the function executes on submitting the form, the username gets logged in the console fast before the page refreshed with submitted data. 但是由于函数是在提交表单时执行的，因此在用提交的数据刷新页面之前，用户名会很快登录到控制台中。 You can confirm this and test it by adding event.preventDefault(); 您可以通过添加event.preventDefault();来确认并测试它event.preventDefault(); to the function to prevent submitting the form so the page would stay visible with the console. 阻止提交表单的功能，以便该页面在控制台中保持可见。
<script>
var login = new function()
{
var name = null ;
this.validation = function()
{
event.preventDefault();
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
</script>
If that's not what you're looking for, let me know. 如果这不是您想要的，请告诉我。
解决方案2
0 2017-08-15 07:54:05
We the javascript validation failed you need to return false. 我们的javascript验证失败，您需要返回false。 If you don't it will proceed your form further. 如果您不这样做，它将进一步处理您的表格。 Thanks 谢谢
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
document.getElementById("demo").innerHTML = this.name;
return false;
};
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.