We Keep Coding

setCustomValidity error but the form is submitted

I'm using setCustomValidity function to check if the new password and the repeat password are equals but , I debugged the code and the comparisson its correct but the error message its not shown and the form post request its done
<form action="/register" method="post" onsubmit="check_new_password()">
<div class="form-group">
and the javascript
function check_new_password(){
var new_pass = $('#new-password').val();
var repeated_pass = $('#repeat-password').val();
if(new_pass != repeated_pass){
$('#repeat-password')[0].setCustomValidity('Password are not equals');
}else{
$('#repeat-password')[0].setCustomValidity('');
}

You need to add the return statement in the onsubmit attribute, like this:
onsubmit="return check_new_password();"
So, the check_new_password() function needs to return a boolean according the validation.
Don't forget call the .reportValidity(); method because you're using HTMLObjectElement.setCustomValidity() method.
Additionally, you should add oninput="setCustomValidity('');" on the inputs fields to force to update its state.
See in this example:
function check_new_password() {
var new_pass = $('#new-password').val();
var repeated_pass = $('#repeat-password').val();
if (new_pass != repeated_pass) {
$('#repeat-password')[0].setCustomValidity('Password are not equals.');
$('#repeat-password')[0].reportValidity();
return false;
} else {
$('#repeat-password')[0].setCustomValidity('');
return true;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form action="/register" method="post" onsubmit="return check_new_password();">
<div class="form-group">
<label for="new-password">Password:</label>
<input id="new-password" class="form-control" type="password" oninput="setCustomValidity('');" />
</div>
<div class="form-group">
<label for="repeat-password">Repeat Password:</label>
<input id="repeat-password" class="form-control" type="password" oninput="setCustomValidity('');" />
</div>
<div>
<button class="btn btn-xs btn-primary" type="submit">Send</button>
</div>
</form>
</div>

Your session has expired. on ajax form post laravel

I have the following html snippit from my view and js code to handel the form request.
$('#quick-enquiry').on('submit', function(e) {
e.preventDefault();
$(".submit").prop("disabled", true);
data = $(this).serialize();
action = $(this).attr('action');
$.ajax({
type: 'POST',
url: action,
data: data,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
},
success: function(data) {
if ($.isEmptyObject(data.error)) {
$("#quick-enquiry").trigger("reset");
$('.print-error-msg').find('ul').empty();
$('.print-error-msg').css('display', 'block');
$("#response-msg").toggleClass('uk-alert-danger uk-alert-success');
$('.print-error-msg').find('ul').append("<li>" + data.success + "</li>");
setTimeout(function() {
$('.print-error-msg').fadeOut();
$(".submit").prop("disabled", false);
UIkit.modal("#modal-quick-enquiry").hide();
}, 3000);
} else {
printMessageErrors(data.error);
}
}
});
});
function printMessageErrors(msg) {
$('.print-error-msg').find('ul').empty();
$('.print-error-msg').css('display', 'block');
$.each(msg, function(key, value) {
$('.print-error-msg').find('ul').append("<li>" + value + "</li>");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet" />
<form action="{{ route('frontend-postEnquiry') }}" method="POST" id="quick-enquiry">
<input type="hidden" id="tour-id" value="1">
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Full Name</label>
<div class="uk-form-controls">
<input class="uk-input uk-form-width-large" type="text" placeholder="Full Name" id="fullName" name="fullName">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Email</label>
<div class="uk-form-controls">
<input class="uk-input uk-form-width-large" type="email" placeholder="Email" id="email" name="email">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Message</label>
<div class="uk-form-controls">
<textarea class="uk-textarea uk-form-width-large" rows="4" placeholder="Some Message...." id="enquiryMessage" name="enquiryMessage"></textarea>
</div>
</div>
<p class="uk-text-right">
<button class="uk-modal-close-default" type="button" uk-close></button>
<button class="uk-button uk-button-primary submit uk-width-1-1" type="submit">Send</button>
</p>
</form>
With the above code I'm getting
419
Sorry, your session has expired. Please refresh and try again.
I've set CSRF-TOKEN in ajax and in head section also, but seems like my js code is not picking up csrf token.
I would be very thankful if anyone could highlight the mistake I've made above.

Try using this:
{{ csrf_field() }} instead of #csrf
419 error is mostly because of CSRF token issues.

AngularJS $resource writeFileSync giving Error: ENOENT: no such file or directory, open

I have been doing a tutorial on AngularJS and am stuck on trying to fill this form and have it saved to disk as a json file using the $resource service.
I keep getting the error
Error: ENOENT: no such file or directory, open '/data/event/999.json'
app/NewEvent.html
<!doctype html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div class="container">
<div class="navbar-inner">
<ul class="nav">
<li>Create Event</li>
</ul>
</div>
<style> input.ng-invalid.ng-dirty {background-color:pink}</style>
<div ng-controller="EditEventController" style="padding-left:20px; padding-right:20px">
<div class="container">
<h1>New Event</h1>
<hr>
<form name="newEventForm">
<fieldset>
<label for="eventName">Event Name:</label>
<input id="eventName" type="text" required ng-model="event.name" placeholder="Name of your event ...">
<label for="eventDate"> Event Date</label>
<input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model="event.date" placeholder="format (mm/dd/yyyy)...">
<label for="eventTime">Event Time:</label>
<input id="eventTime" type="text" ng-model="event.time" placeholder="start and end time ...">
<label for="eventLocation"> Event Location</label>
<input id="eventLocation" type="text" ng-model="event.location.address" placeholder="Address of event...">
<br>
<input id="eventCity" type=text" ng-model="event.location.city" class="input-small" placeholder="City...">
<input id="eventProvince" type="text" ng-model="event.location.province" class="input-small" placeholder="Province...">
<label for="eventImageUrl">Image:</label>
<input id="eventImageUrl" type="url" ng-model="event.imageUrl" class="input-xlarge" placeholder="Url of image...">
</fieldset>
<img ng-src="{{event.imageUrl}}" src="">
<br>
<br>
<button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
<button type="button" ng-click="cancelEdit()" class="btn btn-default">Cancel</button>
</form>
</div>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/underscore-1.4.4.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular/angular-resource.js"></script>
<script src="/lib/angular/angular-sanitize.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/EventController.js"></script>
<script src="/js/controllers/EditEventController.js"></script>
<script src="/js/services/EventData.js"></script>
<script src="/js/filters.js"></script>
</body>
</html>
app/js/controllers/EditEventController.js
eventsApp.controller('EditEventController',function EditEventController($scope,eventData) {
$scope.saveEvent = function (event, newEventForm) {
if(newEventForm.$valid){
eventData.save(event)
.$promise.then(
function (response) { console.log('success',response)},
function (response) { console.log('failure',response)}
)
}
}
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
}
})
app/js/services/EventData.js
eventsApp.factory('eventData', function ($resource) {
return {
getEvent: function() {
return $resource('/data/event/:id.json',{id:'#id'}).get({id:1});
},
save: function (event) {
event.id = 999;
return $resource('/data/event/:id',{id:'#id'}).save(event);
}
}
})
scripts/eventsController.js
var fs = require('fs')
module.exports.get = function (req,res) {
var event = fs.readFileSync('/data/event/' + req.params.id ,'utf8');
res.setHeader('Content-Type','application/json');
res.send(event)
}
module.exports.save = function (req,res) {
var event = req.body;
fs.writeFileSync('/data/event/' + req.params.id +'.json', JSON.stringify(event));
res.send(event)
}
scripts and app are on the same level
EventDetails.html is inside app and in the same level as NewEvent.html

At first glance the code looks correct, could this maybe be a permission problem?

PHP/MySql user registration, how can i make a user that wants to register not use the same username?

I'm making a web page, and I want the users to have a username and a password, but I don't want the usernames to repeated, My database is already connected to my web page and a section for them to put their information, such as name, username, password, etc.
I need help on how to warn the user to input another username if the one they have entered is already taken. Here's my code in HTML/PHP/MySQL:
<!DOCTYPE html>
<html>
<head>
<title>Skillfair</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesbd_o.css">
</head>
<body>
<section id="header" class="jumbotron">
<header class="container">
<div class="row">
<h2 class="col-sm-4">Database</h2>
<nav class="col-sm-8 text-right">
<p id="btnregister">Register</p>
<!--antes estaba escrito newest en vez de register-->
<p id="btncatalogo">Catalogue</p>
<p id="btnlogin">Login</p>
<!--antes estaba escrito contact en vez de login-->
<p id="btncart">Cart</p>
</nav>
</div>
</header>
</section>
<!--Seccion de la parte del registro -->
<section id="registro1" class="container">
<div id="registro">
<div class="row">
<figure class="col-sm-12">
<form id="form1" name="form1" method="post" action="" onsubmit="return valido()">
<fieldset class="col-sm-12">
<h1>Register <span> now!</span></h1>
<input name="username" type="text" placeholder="You must input your username" maxlength="20">
<input name="password" type="password" placeholder="You must input your password" maxlength="20">
<input name="name" type="text" placeholder="You must input your name(s)" maxlength="20">
<input name="lastname" type="text" placeholder="You must input your lastname" maxlength="20">
<input name="school" type="text" placeholder="You must input your school" maxlength="20">
<input name="age" type="number" placeholder="You must input your age" maxlength="2">
<input name="phone" type="tel" placeholder="You must input your phone number" maxlength="20">
<input name="email" type="email" placeholder="You must input your email" maxlength="35">
<button type="submit">Sent Data</button>
<input id="reset" type="reset" value="Clear fields" id="reset">
</fieldset>
</form>
<p id="sent">
</figure>
</div>
</div>
</section>
<!--Seccion de la parte del catalogo -->
<section class="container">
<div id="catalogo">
<div class="row">
<figure class="col-sm-6">
<p>-kitchen</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/kitchen.jpg"/>
</figure>
<figure class="col-sm-6">
<p>-woodwork</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/woodwork.jpg"/>
</figure>
</div>
<div class="row">
<figure class="col-sm-6">
<p>-gifts</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/gifts.jpg"/>
</figure>
<figure class="col-sm-6">
<p>-antiques</p>
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/antique.jpg"/>
</figure>
</div>
</div>
</section>
<footer class="container">
<div class ="row">
<p class="col-sm-4">© 2016 Skillfair</p>
</div>
</footer>
<!-- Faltan registros (javascript)-->
<script type="text/javascript">
function valido () {
if(document.form1.username.value=="") {
alert ('You must input your username');
document.form1.username.focus();
return false;
}
if(document.form1.password.value=="") {
alert ('You must input your password');
document.form1.password.focus();
return false;
}
if(document.form1.name.value=="") {
alert ('You must input your name');
document.form1.name.focus();
return false;
}
if(document.form1.lastname.value=="") {
alert ('You must input your last name');
document.form1.lastname.focus();
return false;
}
if(document.form1.school.value=="") {
alert ('You must input your school');
document.form1.school.focus();
return false;
}
if(document.form1.age.value=="") {
alert ('You must input your age');
document.form1.age.focus();
return false;
}
if(document.form1.phone.value=="") {
alert ('You must input your phone number');
document.form1.phone.focus();
return false;
}
if(document.form1.email.value=="") {
alert ('You must input your email');
document.form1.email.focus();
return false;
}
else {
alert ('Success!!');
return true;
}
}
</script>
<script>
/* script para la apertura y cierre del boton register */
$(document).ready(function(){
$("#btnregister").click(function(){
$("#registro").fadeToggle("slow");
$("#catalogo").hide();
});
$("#registro").hide();
});
/* script para la apertura y cierre del boton catalogo */
$(document).ready(function(){
$("#btncatalogo").click(function(){
$("#catalogo").fadeToggle("slow");
$("#registro").hide();
});
$("#catalogo").hide();
});
</script>
<?php
//Connect to database
mysql_pconnect('localhost:8889','xxxx','xxxx');
//***********************
//Select database
mysql_select_db('users');
//***********************
//Insert data into database
if (isset($_POST['username']))
{
$username=$_POST['username'];
$password=$_POST['password'];
$name=$_POST['name'];
$lastname=$_POST['lastname'];
$school=$_POST['school'];
$age=$_POST['age'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$cad="insert into users.data (username, password, name, lastname, school, age, phone, email) values ('".$username."','".$password."','".$name."','".$lastname."','".$school."','".$age."','".$phone."','".$email."') ";
mysql_query($cad);
}
?>
</body>
</html>
I'm sorry if the comments and some other things are in spanish because my code was originally in spanish but i tried to translate it as much as i could, so please, if anybody could help me with this issue that would be great!!

You can achieve the functionality using ajax. Just post data to the php file which checks for duplication using ajax.
Here is an example which should solve your problem.
HTML
<input type="text" id="user" name="user" disabled="true" required><br><span id="usererr"></span>
jquery code
$("#user").keyup(function (e) {
e.preventDefault();
var user = $(this).val();
var dataString = 'user=' + user;
$.ajax({
type: 'POST',
url: 'checkusername.php',
data: dataString,
cache: false,
success: function (html)
{
$("#usererr").html(html);
}
});
});
PHP (CODE checkuser.php)
if($_POST)
{
if(isset($_POST['user']))
{
$user= strtolower(sanitizeString($_POST['user']));
$query="select * from users.data where username='".$user."'";
$result= mysql_query($query);
if(mysql_num_rows($result)==0)
{
echo '<font color="green">Username is Available</font><br>';
}
else
{
echo '<font color="red">Username is already taken. Please select another username.</font><br>';
echo '<script language="javascript">var user=document.getElementById("user");'
. 'user.value="";</script>';
}
}
}
NOTE: mysql_* functions are depreciated and no longer used. I have provided the code as per your need. It is highly recommended that you upgrade to mysqli_* functions.

No change when click on login button in ios phonegap app

My index.html page is:
<link rel="stylesheet" href="../css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.mobile-1.3.1.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/cordova.js"></script>
<script src="../js/jstorage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
loadHeader("YSN Login", false);
});
</script>
</head>
<body>
<!-- Home -->
<div id="header"></div>
<div class="firstDiv"></div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain">
<label for="textinput6">
Email Address
</label>
<input name="username" id="username" type="text" onkeyup="toggle(this)" value="">
</div>
<span class="ValidationErrors" id="userNameMsg" style="display: none;">Should be a valid Email Id</span>
<div data-role="fieldcontain">
<label for="textinput6">
Password
</label>
<input name="password" id="password" type="password" onkeyup="toggle(this)" value="" class="btn btn-8 btn-8a">
</div>
<span class="ValidationErrors" id="passwordMsg" style="display: none;">Should be a valid password</span>
<a data-role="button" data-theme="b" onclick="loginUser();">
Login
</a>
<div>
<a href ="#" onclick="openSelfWindow('resetPassword.html')" data-transition="fade">
Forget your password?
</a>
</div>
</form>
and my loginUser function which runs on click of login button, I am calling restful web services through ajax
function loginUser(){
var loginData = new Object();
loginData.username = $("#username").val();
loginData.password = $("#password").val();
var loginObj = new function(){
this.url = ysnURL + "userservice/login/user/"
this.data = JSON.stringify(loginData)
this.success = loginSuccess
this.error = loginError
this.beforeSend = validateLoginForm//validates the login form
}
tugnavAjaxPOST(loginObj);
}
function loginSuccess(data){
console.debug(JSON.stringify(data));
stopSpinner();
if(data.success == "true"){
setSession($.parseJSON(data.message));
var ref = openSelfWindow("dashboard.html");
}
else{
showAlert("YSN Login", data.message, function(){});
}
}
function loginError(data){
console.debug(JSON.stringify(data));
stopSpinner();
showAlert("YSN Login", "Error while logging to YSN", function(){});
}
I am ruuning this app on ios simulator, when I click on resetpassword link it takes me to the next page but clicking on login button does not show any alert or in simple words screen remains same.The same code is running properly for android but not for ios,even I have included the cordova.js file for ios then also the problem remains same.