Develop Reference

Use javascript code in php in function.php file

I write this code for a login form in function.php file in Wordpress:
$name = $_POST['dx'];
$pass = $_POST['SX'];
$submitbutton= $_POST['commit'];
if ( isset($submitbutton) ) {
if( isset($name) && empty($name) ){
echo '<script> var errorMsg = document.getElementById("errorMsg");
errorMsg.innerHTML = "username is empty";
errorMsg.style.display = "block"; </script>';
}
else if( isset($pass) && empty($pass) ){
$name = "";
$pass = "";
echo '<script> var errorMsg = document.getElementById("errorMsg");
errorMsg.innerHTML = "password is empty";
errorMsg.style.display = "block"; </script>';
}
}
I got an error Cannot read property 'style' of null
HTML code
<div class="login">
<ul class="errorMessages" id="errorMsg">
<li></li>
</ul>
<form method="post" action="">
<p>
<label for="dx">username</label><br>
<input type="text" name="dx" value="" id="dx" maxlength="20">
</p>
<p>
<label for="SX">password</label><br>
<input id="SX" type="password" name="SX" value="" maxlength="30"
class="keyboardInput" vki_attached="true">
</p>
<div class="separator"></div>
<p class="submit">
<input type="submit" name="commit" value="login">
</p>
</form>
</div>
I want to check the form fields, if fields were empty, show the error messege above the form.
Something like this image:
How can I use script code in right way in PHP? and how can I resolve this error?

<div class="login">
<ul class="errorMessages" id="errorMsg">
</ul>
<form method="post" action="">
<p>
<label for="dx">username</label><br>
<input type="text" name="dx" value="" id="dx" maxlength="20">
</p>
<p>
<label for="SX">password</label><br>
<input id="SX" type="password" name="SX" value="" maxlength="30" class="keyboardInput" vki_attached="true"><img src="http://account.taminm.ir/wp-content/uploads/2020/01/keyboard.png" alt="Display virtual keyboard interface" class="keyboardInputInitiator" title="Display virtual keyboard interface">
</p>
<div class="separator"></div>
<p class="submit">
<input type="submit" name="commit" value="login">
</p>
</form>
</div>
<script type="text/javascript">
const loginWrapper = document.querySelector('.login'),
errorContainer = loginWrapper.querySelector('.errorMessages'),
form = loginWrapper.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const username = form.querySelector('#dx').value.trim(),
password = form.querySelector('#SX').value.trim();
if ( !username ) {
errorContainer.innerHTML = 'username is empty';
} else if (!password) {
errorContainer.innerHTML = 'password is empty';
} else {
form.submit()
}
});
</script>

Javascript - A problem with the validation of my form

I have a problem with the validation script of my php form to send an email, and although it works very well to validate the form, when the user clicks on the "accept" button of the alert, the script does not block the action, and the form is sent anyway...
What am I doing wrong?
Thanks in advance!
HTML:
<div id="form">
<section>
<form action="send.php" method="post" accept-charset='UTF-8'>
<label for="email"></label>
<input id="email" type="email" name="email" maxlength="50">
<input type="hidden" name="privacy" value="blahblahblah"/>
<input id="submit" type="submit" name="submit" value="SEND" onclick="validate(this);">
</div>
</form>
</section>
</div>
SCRIPT (validation):
function validate () {
var email;
email = document.getElementById("email").value;
expresion = /\w+#\w+\.+\w/;
if(email === "") {
alert("You cannot submit this request. You must give us an email");
return false;
}
else if (email.length>50) {
alert("The maximum for email is 50 characters");
return false;
}
else if (!expresion.test(email)) {
alert("Check your information. The email format is not valid");
return false;
}
}

Change the event to onsubmit and put it on the form.
function validate () {
var email;
email = document.getElementById("email").value;
expresion = /\w+#\w+\.+\w/;
if(email === "") {
alert("You cannot submit this request. You must give us an email");
return false;
}
else if (email.length>50) {
alert("The maximum for email is 50 characters");
return false;
}
else if (!expresion.test(email)) {
alert("Check your information. The email format is not valid");
return false;
}
console.log('passed!');
}
<div id="form">
<section>
<form action="" method="post" accept-charset='UTF-8' onsubmit="return validate(this);">
<label for="email"></label>
<input id="email" type="email" name="email" maxlength="50">
<input type="hidden" name="privacy" value="blahblahblah"/>
<input id="submit" type="submit" name="submit" value="SEND">
</form>
</section>
</div>

Why won't JS redirect the webpage when statement is true?

I have an input for username and one for password. When the username and/or password don't match, I successfully get the "alert", but when they do match, nothing happens. I can't figure out what I'm doing wrong.
I have tried windows.location.replace as well, with the same results.
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location ("http://stackoverflow.com");
}
else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>

It should be
window.location = 'http://stackoverflow.com';
instead of a function call. The other problem was the button causing a page reload. To fix that you should do:
<button type="button" onclick="user1()">Submit</button>
type="button" will prevent it from submitting the form by default.
demo
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location = "http://stackoverflow.com";
}
else {
alert('incorrect username or password');
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button type="button" onclick="user1()">Submit</button>
</form>

window.location="url"
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location="http://stackoverflow.com";
}
else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>

Assuming you are looking for window.open, where window.location will also work
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.open("https://stackoverflow.com");
} else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>

validate popup, then open another popup

I am using bootstrap to create a popup signup form. Once the user clicks submit and it has been validated I want to close that popup and open another saying thank you. I have tried using .modal('show') in popupvalidation.js but that did not seem to work. All it did was open both at the same time.
Here is the code:
index.php
<form name="popup" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" onsubmit="return popupValidation();" method="post">
<div class="row">
<input name="firstName" type="text" class="form-control" id="inputFirstName" placeholder="First Name">
<input name="lastName" type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
<div class="row">
<input name="email" type="email" class="form-control" id="inputEmail" placeholder="youremail#email.com">
</div>
<div class="row">
<input name="password" type="password" class="form-control" id="inputPassword" placeholder="password">
</div>
<div class="row">
<input name="repeatPass" type="password" class="form-control" id="retypePassword" placeholder="Retype password">
</div>
<div class="row">
<input name="trainer" type="checkbox"/> Sign up as trainer
</div>
<div class="modal-footer popup-footer">
<p id="error">Please make sure all fields are filled out</p>
<input type="submit" class="btn btn-default submit" value="Register">
</div>
</form>
popupvalidation.js
function popupValidation() {
var fname = document.forms["popup"]["firstName"].value;
var lname = document.forms["popup"]["lastName"].value;
var pass = document.forms["popup"]["password"].value;
var repass = document.forms["popup"]["repeatPass"].value;
var email = document.forms["popup"]["email"].value;
if (fname==null || fname=="") {
document.getElementById("inputFirstName").focus();
document.getElementById("error").innerHTML= 'Please enter your First Name';
document.getElementById("error").style.display = 'block';
return false;
}
if (lname==null || lname=="") {
document.getElementById("inputLastName").focus();
document.getElementById("error").innerHTML= 'Please enter your Last Name';
document.getElementById("error").style.display = 'block';
return false;
}
if (email==null || email=="") {
document.getElementById("inputEmail").focus();
document.getElementById("error").innerHTML= 'Please enter a valid email';
document.getElementById("error").style.display = 'block';
return false;
}
if (pass==null || pass=="") {
document.getElementById("inputPassword").focus();
document.getElementById("error").innerHTML= 'Please enter a password';
document.getElementById("error").style.display = 'block';
return false;
}
if (repass==null || repass=="") {
document.getElementById("retypePassword").focus();
document.getElementById("error").innerHTML= 'Please retype password';
document.getElementById("error").style.display = 'block';
return false;
}
if (repass!=pass) {
document.getElementById("retypePassword").focus();
document.getElementById("error").innerHTML= 'Passwords do not match';
document.getElementById("error").style.display = 'block';
return false;
}
}

JavaScript form validation without alert

HTML Form
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="page-header">
<h1 align="center" class="header">ONLINE ADMISSION FORM </h1>
</div>
<form role="form" method="post" name="sign_up_form" onSubmit=" return validateForm()">
<div class="container">
<div class="form-group">
<label for="username">User Name</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter User Name">
</div>
<span id="usernameError"></span>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
</div>
<span id="emailError"></span>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<span id="passwordError"></span>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Confirm Password">
</div>
<span id="confError"></span>
<input id="button" type="submit" name="signup" value="Sign-Up" >
</div>
</form>
</body>
</html>
JavaScript
<script type="text/javascript">
function validateForm()
{
var username = checkUsername();
var email = checkEmail();
var password = checkPassword();
var conf = checkConf();
}
// Validate the fill in of First Name
function checkUsername(){
var userName=document.forms["sign_up_form"]["username"].value;
if (userName==null || userName=="")
{
document.getElementById("usernameError").innerHTML = "Not a valid e-mail address";
return false;
}
else{
return true;
}
function checkEmail()
{
// code for email validation starts here
var Email=document.forms["sign_up_form"]["email"].value;
var atpos=Email.indexOf("#");
var dotpos=Email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=Email.length)
{
var error=document.forms["sign_up_form"]["emailError"].innerHtml="Not a valid e-mail address";
return false;
}
else {
return true;
}
}
//code for email validation ends here
function checkPassword()
{
var Password=document.forms["sign_up_form"]["password"].value;
if (Password==null || Password=="")
{
var error=document.forms["sign_up_form"]["passwordError"].innerHtml="Choose Password";
}
return false;
else {
return true;
}
}
function checkConf()
{
var confirm_password=document.forms["sign_up_form"]["conf_password"].value;
if(confirm_password==null || confirm_password=="")
{
var error=document.forms["sign_up_form"]["confError"].innerHtml="Confirm Password";
return false;
}
else {
return true;
}
}
</script>
What's wrong this JavaScript? Why doesn't it display an error message?

you are missing one closing brace...
function checkUsername(){
var userName=document.forms["sign_up_form"]["username"].value;
if (userName==null || userName==""){
document.getElementById("usernameError").innerHTML = "Not a valid e-mail address";
return false;
}
else{
return true;
} // missing this
}

onSubmit=" return validateForm()"
should not be capitalized for S
onsubmit=" return validateForm()"