I have a perfectly working page in Firefox and Chrome. Unfortunately, I need to support IE. I am using jQuery v1.9.0 and Validation v1.12.0
Here's the source.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>redacted</title>
<meta name="description" content="redacted">
<meta name="author" content="******">
<link rel="stylesheet" href="/styles.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/functionality/funcs.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('div#spaces p').load('/reload.php/?id=<?php echo $id ?>').fadeIn("slow");
}, 4000); // refresh every 10000 millisecond
</script>
<script src=http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js></script>
<script>
$(document).ready(function () {
$(function(){
$("#bookingForm").validate({
rules: {
bookingname: "required",
ticketno: "required",
numPeople: {
required: true,
max: <?php echo $spaces ?>
}
},
messages: {
bookingname: "Please enter your name",
ticketno: "Please enter the ticket number",
numPeople: {
required: "You are trying to book zero people",
max: "The activity is full"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
});
</script>
<body>
<div class="header">
<h1><?php echo $activity.": ".$day."-".$month."-".$year." ".$time;?></h1>
</div>
<div class="formInstructions">
<p> Edit Event </p>
</div>
<table class="eventInfo">
<thead>
<tr><th>Activity Name</th><th>Activity Date</th><th>Activity Time</th><th>Spaces</th><th>Cost</th><th>Venue</th></tr>
</thead>
<tr><td><?php echo $activity;?></td><td><?php echo $activity_date?></td><td><?php echo $time ?></td><td><div id="spaces"><p><?php get_spaces($id);?></p></div></td><td><?php get_cost($id)?></td><td><?php get_venue($id)?></td></tr>
</table>
<div class="formInstructions">
<p><?php echo get_event_comments($id);?></p>
</div>
<!--table displays current bookings -->
<table class="eventInfo">
<thead>
<tr><th>Ticket No.</th><th>Contact</th><th>Pickup</th><th>PAX</th><th>Comments</th></tr>
</thead>
<?php get_bookings($id)?>
</table>
<!--booking form -->
<form action="/formfuncs/bookingForm.php" method="POST" id="bookingForm" name="bookingform" novalidate="novalidate">
<fieldset>
<legend>Book an Activity</legend>
<label for="bookingname">Name</label>
<input type="text" name="bookingname" id="bookingname" />
<label for="ticketno">Ticket No. </label>
<input type="text" name="ticketno" id="ticketno" />
<label for="pickup">Pick up</label>
<input type="text" name="pickup" id="pickup" />
<label for="numPeople">Number of People</label>
<input type="text" id="numPeople" name="numPeople"/>
<input type="hidden" id="id" value="<?php echo $id ?>" name="idfield"/>
<label for="needsOrComments">Place comments here</label>
<textarea name="needsOrComments" rows="10" cols="80">N/A</textarea>
<input type="submit" value="Go" name="go">
</fieldset>
</form>
</body>
</html>
While the page loads, displays and interacts well in Firefox and Chrome. When loaded in Internet Explorer the console spits out "SCRIPT438: Object doesn't support property or method 'validate" on line28 column 5.
This might be due to the version conflicts between the jquery and jquery validate. Make sure you are using the jquery validate version compatible with jquery.
Related
I boiled down an example of a Laravel app that uses Bootstrap 5.0 and Javascript. The validation works at the Javascript level but incorrectly filled in or empty fields are never highlighted by Bootstrap for entry on failure. Your specific route for stackexchange.blade.php must be coded Route::any('Route','stackexchange')'. My question is why this is happening? Can you suggest a fix.
//pagescript2.js
function sendJSON(ip_address)
{
let o = {
ip:ip_address
}
alert(JSON.stringify(o));
//call Zapier webhook with Fetch API.
return true;
}
function VForm(ip_address)
{
//Check forms validity, call redirecting method.
if ($('form')[0].checkValidity()) {
sendJSON(ip_address);
//This redirects as expected
window.location.href="https://www.yahoo.com";
}
return false;
}
<!-- stackexchange.blade.php-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{asset('js/landingpages/pagescript2.js')}}"></script>
<form method = "POST" onsubmit="return VForm('<?php echo $_SERVER['REMOTE_ADDR'];?>');" class="needs-validation" novalidate>
#csrf
<div>
<label for="fname">First Name</label>
<input id= "fname" class="form-control" name="fname" type = "text" required />
<label for="email">Email Address</label>
<input id = "email" class="form-control" name="email" type="email" required/>
</div>
<button value="Submit" type="submit">Send Up!!</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
you just need to delete this code novalidate, so that the validation works well
//pagescript2.js
function sendJSON(ip_address)
{
let o = {
ip:ip_address
}
alert(JSON.stringify(o));
//call Zapier webhook with Fetch API.
return true;
}
function VForm(ip_address)
{
//Check forms validity, call redirecting method.
if ($('form')[0].checkValidity()) {
sendJSON(ip_address);
//This redirects as expected
window.location.href="https://www.yahoo.com";
}
return false;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{asset('js/landingpages/pagescript2.js')}}"></script>
<form method = "POST" onsubmit="return VForm('<?php echo $_SERVER['REMOTE_ADDR'];?>');" class="needs-validation">
<div>
<label for="fname">First Name</label>
<input id= "fname" class="form-control" name="fname" type = "text" required />
<label for="email">Email Address</label>
<input id = "email" class="form-control" name="email" type="email" required/>
</div>
<button value="Submit" type="submit">Send Up!!</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
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>');
}
});
}
});
I am getting a really weird behaviour where I noticed that jquery only executes if there is a dummy javascript prior to it.
With javascript (with alerts command) coded before the jquery scripts
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="true" language="java" />
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
alert('x');
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</head>
<body>
<br />
<br />
<br />
<header>
<div id="header-center-11x12">
<img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
alt="goeasyhome" />
</div>
</header>
<br />
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
Password? </a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
When i submit without any data e.g. no email address, the correct validation message pops up as shown below.
With javascripts (alerts command) commented out.
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<!-- <script type="text/javascript">
alert('x');
</script> -->
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
:
:
You'll noticed the default message 'Please fill in this field' instead of the 'Please fill in this field 2' is displayed. The jquery command didn't run.
This is bizzare to me.
Any help would be great.
Here's the jsfiddle https://jsfiddle.net/yapkm01/3f321g84/
Refer the jquery to the code. I've pasted the whole page here. It works great. Please let me know.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">
Forgot
Password?
</a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<script type="text/javascript">
//alert('x');
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</body>
</html>
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.
Im trying to put my "register.php" into fancybox, however I cant make it connect there.
To call up fancybox I use this:
<body>
Open
<div id="test" style="display:none;width:400px; height:600px;"
**Content here**
<!--Javascript for fancybox-->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
My register form is like this:
<?php
include_once 'includes/register.inc.php';
include_once 'includes/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login: Registration Form</title>
<script type="text/JavaScript" src="js/sha512.js"></script>
<script type="text/JavaScript" src="js/forms.js"></script>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<!-- Registration form to be output if the POST variables are not
set or if the registration script caused an error. -->
<h1>Register with us</h1>
<?php
if (!empty($error_msg)) {
echo $error_msg;
}
?>
<ul>
<li>Usernames may contain only digits, upper and lower case letters and underscores</li>
<li>Emails must have a valid email format</li>
<li>Passwords must be at least 6 characters long</li>
<li>Passwords must contain
<ul>
<li>At least one upper case letter (A..Z)</li>
<li>At least one lower case letter (a..z)</li>
<li>At least one number (0..9)</li>
</ul>
</li>
<li>Your password and confirmation must match exactly</li>
</ul>
<form method="post" name="registration_form" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>">
Username: <input type='text' name='username' id='username' /><br>
Email: <input type="text" name="email" id="email" /><br>
Password: <input type="password"
name="password"
id="password"/><br>
Confirm password: <input type="password"
name="confirmpwd"
id="confirmpwd" /><br>
<input type="button"
value="Register"
onclick="return regformhash(this.form,
this.form.username,
this.form.email,
this.form.password,
this.form.confirmpwd);" />
</form>
<p>Return to the login page.</p>
</body>
</html>
Im using the latest version of fancybox and I havent done much with the js files. Any ideas?