I'm now constructing a registration page and have labeled username and password inputs as required. Simple code as:
Username <input id="username" type="text" required/>
Password <input id="username" type="password" required/>
<button id="register">Register</button>
<div id="registerOutput></div>
When I just run those code with pure HTML on localhost the "required" would function properly. But once I include a register.js file which I made to get the data and use AJAX to send data to register.php, the required attribute seems not working. In register.js, simple code as:
$(document).ready(function(){
$("#register").on("click", function(){
var username = $("#username").val();
var password = $("#password").val();
var userData = "username=" + username + "&password=" + password;
$.ajax({
method: "post",
url: "register.php?",
data: userData,
success: function(backData){
$("#registerOutput").html(backData);
}
});
});
});
Can anybody tell me the reason why jQuery would override the functionality of required? How to surpass it or if it must override, how should I do the same thing in my jQuery code?
You might want to redesign your code a little bit. There is a way to follow HTML convenience and yet use full power of AJAX.
I edited your example in jsfiddle: https://jsfiddle.net/myezf63b/
So here is modified HTML:
<form id="form">
Username <input id="username" type="text" required/>
Password <input id="username" type="password" required/>
<button type="submit" id="register">Register</button>
</form>
<div id="registerOutput">
</div>
Basically I added type="submit" to button and wrapped it inside form.
and this is modified jQuery code:
I added e.preventDefault() which prevents website from redirecting (reloading page) and as event I used submit which follows this pattern.
$(document).ready(function(){ $("#form").on("submit", function(e){
e.preventDefault()
var username = $("#username").val();
var password = $("#password").val();
var userData = "username=" + username + "&password=" + password;
console.log('test')
$.ajax({
method: "post",
url: "register.php?",
data: userData,
success: function(backData){
$("#registerOutput").html(backData);
}
});
});
});