JQuery(JavaScript)+PHP syntax explanation - javascript

Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});

Related

Cannot read properties of null (reading 'value') error occurs when trying to validate the user input

I am getting an error when trying to check if an input field is empty or not. I tried the function with First Name input Field but not working.
I am trying to check if the First Name input field is empty the input border should turn red if not the border should stay the same.
HERE IS MY CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById("fieldID");
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField(userFirstName);">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
You are passing fieldId and then trying to access with "" which actually converts the fieldId to a string. I have fixed the issue, please check the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById(fieldID);
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField('userFirstName');">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
The error occurs when you are trying to get check.value.length when check === null. So this sentences it's returning null value:
check = document.getElementById("fieldID");
Try to change that line to:
check = document.getElementById(fieldID);
Because you are writting a literal string, not using the variable.
There are two problems with the above code:
1: change below line of code
check = document.getElementById("fieldID");
to
check = document.getElementById(fieldID);
2: use string literals to pass id of the field to funtion called onblur
onblur="validateField(userFirstName);"
replace above line with
onblur="validateField('userFirstName');"

Test Login Utility

I am trying to create a utility that will check if our site is down. The only way to do that is to login and if nothing is returned then the site is down. I've gotten it to the point where it will auto login, but not sure how to get it to check if the login was successful. Anyone got an idea?
<HTML>
<HEAD>
<TITLE>test Login</TITLE>
<script>
function loginForm() {
document.myform.action = "http://example.com";
document.myform.submit();
}
</script>
</HEAD>
<BODY onLoad="loginForm()">
<form action="http://example.com" class="uni-form" method="post" name="_58_fm">
<input name="_58_redirect" type="hidden" value="">
<input id="_58_rememberMe" name="_58_rememberMe" type="hidden" value="false">
<fieldset class="block-labels"> <div class="ctrl-holder">
<label for="_58_login">Email Address</label>
<input name="_58_login" type="text" value="emailaccount#email.com">
</div><div class="ctrl-holder"> <label for="_58_password">Password</label>
<input id="_58_password" name="_58_password" type="password" value="UberSecretPassword">
<span id="_58_passwordCapsLockSpan" style="display: none;">Caps Lock is on.</span>
</div><div class="button-holder">
<input id="submit" type="submit" value="Sign In">
</div></fieldset>
</FORM>
<script>
window.onload = function () {
document.getElementById('submit').click();
}
function checker(){
if(<-- what to put here --> =" You are signed in as "){
// Not sure what to put here
}
}
</script>
</BODY>
</HTML>

Display Post value from HTML form to another HTML form

Quick question. I am starting learn on local storage HTML5. How can I get value from a form and display that value on another HTML form page?
For example, I have two forms here.
If I fill on form 1 and click submit button, and the value will display on form 2 in readable only.
I tried below:
HTML Form 1:
<html>
<head>
<title>Save Value</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="display.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
HTML Form 2:
<html>
<head>
<title>Display</title>
<script type="text/javascript">
function result() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
</form>
</body>
</html>
In display.html you didn't call function result(),
try this,
<html>
<head>
<title>Display</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>

Jquery Nice Form Validation Plugin

I have found a nice form validation plugin in this website:http://formvalidator.net/index.html
While I was trying to implement server-side validation, the plugin doesn't seems to work. It states that it would send the url via POST method to the url that I have declared in the attribute data-validation-url.However when I tried to echo the post variable, it doesn't seems to show in the web browser.
Could someone help to look into it? Maybe I might have done something wrong somewhere. Apologies, I am quite new to programming! :)
Take a look at this page section:http://formvalidator.net/index.html#security-validators
FormValidate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="form-validator/jquery.form-validator.min.js"></script>
<script>
$.validate
({
modules : 'security',
onModulesLoaded : function()
{
$('input[name="pass"]').displayPasswordStrength();
}
});
</script>
</head>
<body>
<form action="" id='form'>
<p>
<label>User name:</label>
<input name="user" data-validation="server" data-validation-url="validateInput.php" />
</p>
<p>
<label>Password:</label>
<input name="pass" data-validation="strength" data-validation-strength="2" type="password">
</p>
<p><i>Hint: A strong password consists of 13 alphanumeric characters.</i></p>
<label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
validate.php
<?php
$response = array(
'valid' => false,
'message' => 'Post argument "user" is missing.'
);
if( isset($_POST['user']) ) {
echo $_POST['user'] //value not echoed in the browser :/
}
echo json_encode($response);
EDITED: I missed completely a slash in the input of the username, and that was the problem, test it now, now it fires the post request.
You only need to add method post on the form.
Try to use proper indentation it's easier to read and no one will blame you for doing it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$.validate({
modules : 'security',
onModulesLoaded : function() {
var optionalConfig = {
fontSize: '12pt',
padding: '4px',
bad : 'Very bad',
weak : 'Weak',
good : 'Good',
strong : 'Strong'
};
$('input[name="pass"]').displayPasswordStrength(optionalConfig);
}
});
</script>
</head>
<body>
<form action="/login" id='form'>
<p>
<label>User name:</label>
<input name="user" data-validation="server" data-validation-url="validateInput.php">
</p>
<p>
<label>Password:</label>
<input name="pass" data-validation="strength" data-validation-strength="2" type="password">
</p>
<p>
<i>Hint: A strong password consists of 13 alphanumeric characters.</i>
</p>
<label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
Check this out, seems to be working fine.
Good Luck.

hide() function doesn't work in jQuery

I am having problems with jQuery validation of a form.
This is my javascript file: test.js.
$(function() {
$('.error').hide();
$(".button").click(function() {
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
});
});
This is my html file.
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
</form>
</div>
</body>
</html>
I placed these two files together with the jQuery file in the same directory on my server, but the content "This field is required." is still visible. It seems like hide() function in the test.js doesn't work. Can anyone point me out where is wrong? Great thanks!
Put your jquery file before your test.js.
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="test.js"></script>

Categories