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>
Related
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 new to angular js. please help me with the below issue
I have a form with a controller loginController. I have two text boxes user.email and user.password.
I want to post the data to servlet onclick of the Log in button.
I have written the following code, but when i click Log in, the data is not getting posted on to the server. Also there is no error message.
Below is my JSP file
`
<html ng-app="practiceApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel ="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="practice.js"></script>
<form name='login' ng-controller='loginController' ng-submit="login()">
<div>
{{hello}}
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required/>
<span ng-show='login.email.$dirty && login.email.$error.required'>Required</span>
<span ng-show='login.email.$dirty && login.email.$error.email'>Not a valid email</span>
<label>Password</label>
<input type="password" name="password" ng-model="user.password" required/><br/>
<span ng-show='login.password.$dirty && login.password.$error.required'>Required</span>
<button ng-disabled="login.$invalid">Log in</button>
</div>
</form>
</body>
</html>
`
JavaScript File
`
var app = angular.module('practiceApp',[]);
app.controller('loginController',function($scope,$http){
$scope.login = function(){
$http({
method: 'POST',
url:'/login',
headers:{'Content-Type':'application/json'},
data:$scope.user
}).success(function(data){
$scope.status=data;
});
}
});
`
I have tried all the solutions that are available but couldn't find any result.. Kindly help on this
Your <button> does not cause the form to submit. Change to <input type="submit" ng-disabled="login.$invalid">Log in</button> or remove ng-submit from the form and add ng-click="login()" to the <button>.
I am trying to perform a simple task. I want to validate a form or show a message stating 'Please complete the form!' What am I overlooking because all works except the message? How can I achieve this or am I simply just missing something? I have tried placing the script at the top and bottom, but I want on the bottom because I want the page to load faster and not pause for the JS.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index</title>
<!--[if it IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![end if]-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form action="login.php" method="post" id="loginForm">
<fieldset>
<legend>Login</legend>
<div><label for="email">Email Address</label>
<input type="email" name="email" id="email" required></div>
<div><label for="password">Password</label>
<input type="password" name="password" id="password" required></div>
<div><label for="submit"></label><input type="submit" value="Login →" id="submit"></div>
</fieldset>
</form>
<script src="login.js"></script>
</body>
</html>
JS
function validateForm() {
'use strict';
var email = document.getElementById('email');
var password = document.getElementById('password');
if ( (email.value.length > 0) && (password.value.length > 0) ) {
return true;
} else {
alert('Please complete the form!');
return false;
}
}
function init() {
'use strict';
if (document && document.getElementById) {
var loginForm = document.getElementById('loginForm');
loginForm.onsubmit = validateForm;
}
}
window.onload = init;
If you want to use your own validation instead of the browser's built-in checking for required fields, remove the required attributes from your <input> tags.
DEMO
I am creating an app to send an object to a class in Parse, but the data in the form is being passed and nothing happens. I can submit data directly from the function showAlert, but no alert appears after setNotification and and showALert is used. Here is my code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>You're message has now been submited.'</p>
</div>
</div>
<div class="login">
<form class="login-form" name="login-form">
<h2>Compose Message</h2>
<input type="text" name="school" id="school" placeholder="School Code" />
<p> </p>
<input type="text" name="name" id="name" placeholder="Name" />
<p> </p>
<input type="text" name="password" id="password" placeholder="Message" />
<p> </p>
<input type="button" value="Set Notification" onClick="setMessage();">
<p> </p>
<input type="button" value="Send Notification" onClick="showAlert();">
</form>
</div>
<script type="text/javascript">
function setMessage (){
var textField = form.school.value
var textField1 = form.name.value
var textField2 = form.password.value
}
function showAlert() {
Parse.initialize("appkey", "javascript key");
var TestObject = Parse.Object.extend(textField);
var testObject = new TestObject();
testObject.save({teacher: textField1), message:textField2)}, {
success: function(object) {
$(".success").show();
alert('The Message has been sent!');
},
error: function(model, error) {
$(".error").show();
alert('There has been an error.');
}
});
}
</script>
</body>
</html>
I am dusting off my Javascript knowledge to create an page that syncs to an iOS app. Any help is greatly appreciated!
I am very new to jquery. Here what I'm trying to do is creating text box and button(login form). The following code is giveing me duplicate result. Is there something wrong with my code?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>
What is happening is the $(document).ready is being called twice. I think this may have to do with jQuery mobile.
See here:
jQuery $(document).ready () fires twice
And here:
http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice
for more information.
A quick fix is to put the script tag in the head tag. See example below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
</head>
<body>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>