英文:
how to stop a form going to the next page without giving values
问题
I have created a form. But when I click on the submit button without giving values, it goes to the next page. I only want it to happen after giving values.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<form action="form" method="post" style="text-align:center;margin-top:30px;">
{% csrf_token %}
<input type="text" name="username" placeholder="enter your user name "><br>
<input type="password" name="password" placeholder="enter your password "><br>
<form action="form" method="post">
<button type="submit" class="button">Submit</button>
</form>
</form>
<form method="get" action="register" style="text-align:center;margin-top:30px;">
<button type="submit" >Register</button>
</form>
<!-- end snippet -->
英文:
i have created a form.But when i click on the submit button without giving values, it goes to the next page. i only want it happen after giving values.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<form action="form" method="post" style="text-align:center;margin-top:30px;">
{% csrf_token %}
<input type="text" name="username" placeholder="enter your user name "><br>
<input type="password" name="password" placeholder="enter your password "><br>
<form action="form" method="post">
<button type="submit" class="button">Submit</button>
</form>
</form >
<form method="get" action="register" style="text-align:center;margin-top:30px;">
<button type="submit" >Register</button>
</form>
<!-- end snippet -->
`
答案1
得分: 1
You need to add id attribute to your form element and attach a submit event listener to it like below.
document.getElementById("userForm").addEventListener("submit", function(event) {
// prevent the form from submitting
event.preventDefault();
// get the form input values
var _username = document.getElementById("username").value;
var _password = document.getElementById("password").value;
// check if the input fields are empty
if (_username === "" || _password === "") {
alert("Please fill in all fields");
} else {
// allow the form to submit
this.submit();
}
});
Your HTML should be like below:
<form action="form" id="userForm" method="post" style="text-align:center;margin-top:30px;">
{% csrf_token %}
<input type="text" name="username" id="username" placeholder="enter your user name "><br>
<input type="password" id="password" name="password" placeholder="enter your password "><br>
<button type="submit" class="button">Submit</button>
</form>
英文:
You need to add id attribute to your form element and attach a submit event listener to it like below.
document.getElementById("userForm").addEventListener("submit", function(event) {
// prevent the form from submitting
event.preventDefault();
// get the form input values
var _username = document.getElementById("username").value;
var _password = document.getElementById("password").value;
// check if the input fields are empty
if (_username === "" || _password === "") {
alert("Please fill in all fields");
} else {
// allow the form to submit
this.submit();
}
});
Your html should be like below
<form action="form" id="userForm" method="post" style="text-align:center;margin-top:30px;">
{% csrf_token %}
<input type="text" name="username" id="username" placeholder="enter your user name "><br>
<input type="password" id="password" name="password" placeholder="enter your password "><br>
<button type="submit" class="button">Submit</button>
</form>
答案2
得分: 0
将required属性添加到需要提交表单的输入字段中。
例如：
<input type="text" name="username" placeholder="输入您的用户名" required>
在添加required后，用户必须填写此输入字段才能提交表单，未填写则无法提交表单。
希望这能帮助您解决问题。
英文:
Add required attribute to your input which are required to submit a form.
for Example
<input type="text" name="username" placeholder="enter your user name" required>
after adding required here user have to fill this input field to submit a form, without filling it user cannot submit a form.
Hope this will help you to solve your issue.
答案3
得分: 0
在输入字段中添加必需属性...
我已经在一些输入字段中添加了它。
<form action="form" method="post" style="text-align:center;margin-top:30px;">
{% csrf_token %}
<input type="text" name="username" placeholder="输入您的用户名" required><br>
<input type="password" name="password" placeholder="输入您的密码" required><br>
<form action="form" method="post">
<button type="submit" class="button">提交</button>
</form>
</form>
<form method="get" action="register" style="text-align:center;margin-top:30px;">
<button type="submit">注册</button>
</form>
(Note: This is a translation of the provided HTML code.)
英文:
Add required property in input field..<br>
I have added in some input.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<form action="form" method="post" style="text-align:center;margin-top:30px;">
{% csrf_token %}
<input type="text" name="username" placeholder="enter your user name " required><br>
<input type="password" name="password" placeholder="enter your password " required><br>
<form action="form" method="post">
<button type="submit" class="button">Submit</button>
</form>
</form >
<form method="get" action="register" style="text-align:center;margin-top:30px;">
<button type="submit" >Register</button>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论