Why isn't my Jquery Validate working? - javascript

I have done some online research and can not find a solution. I am using the Jquery Validator plug in to validate my log in and registration forms. I have coded my registration form and it works exactly as it should. However I coded my log in the same exact way and it does not work. When I have blank fields, no message is displayed and the form is allowed to be submitted.
Sign-in.php
<html>
<head>
<link type="text/css" rel="stylesheet" href="../skin/frontend/css/styles.css" media="all">
<?php include('../js/jquery.js'); ?>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="../js/validator.js"></script>
<script src="../js/sign-in.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header"><?php include('../app/views/frontend/header.php'); ?></div>
<div class="body-container">
Sign in <br>
<form method="post" action="../account/signin/sign-in.php" id="signin">
<input type ='text'placeholder='Username' name="usernamesignin" id="usernamesignin" ><br>
<br>
<input type='text' onfocus="this.type='password'" placeholder='Password' name="passwordsignin" id="passwordsignin"><br>
<br>
<input type="submit" value="Log In">
</form>
</div>
</div>
</body>
</html>
Sign-in.js
$(document).ready(function(){
$("#signin").validate({
rules: {
usernamesignin: {
required: true
},
passwordsignin:{
required: true,
minlength:6
}
},
messages: {
username: {
required: "Please Enter A Username"
}
}
});
});
Am I missing something? This should be pretty simple.
Also I notice in my console.log that my registration page throws no errors, however my signin page shows: "Uncaught TypeError: Cannot read property 'msie' of undefined"
Not sure if that is the issue.
Thanks in advance!

Got it! Type in form action and form id.. Problem solved!

I've got your validation by doing the following:
Remove the line "<?php include('../js/jquery.js'); ?>". You shouldn't have two references to jQuery
Edit the following line to be <script src="https://code.jquery.com/jquery-1.10.2.js"></script>. You are missing the protocol https:
As per the this question, you should be able to define a URI without a protocol, but in this instance, when linking to the code.jquery.com CDN, it does not work.

Related

Run a hidden javascript function with in a page

Hello i am creating a form in which user have to find password to access the other page.As I am hard codding correct password in my if condition.Some users will inspect it and know the password.So I am struggling to hide my if statement or even all JavaScript code from being inspected.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./login/style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="password" id="password" name="p" placeholder="Password" required="required" />
<button type="button" value="Login" onclick="checkPassword()" class="btn btn-primary btn-block btn-large">login</button>
</form>
</div>
<!-- partial -->
<script src="./login/script.js"></script>
</body>
</html> <script>
function checkPassword(){
if(document.getElementById('password').value == 'layriix'){
location.href = "https://gunsellerlayr.000webhostapp.com/gunseller.html";
} else {
alert('Wrong Password!');
return false;
}
}
</script>
Since, I can't comment. I will try to list out everything in an elucidated manner.
Firstly, answering your main question, there is no way to hide client-side code, that is the JavaScript that you are serving to the browser. You can maybe try obfuscating it, but if it is being served to a client, you cannot really hide it.
Now, what you are attempting to do, is frankly not a thing you should be doing. Passwords on the client side are in no way a method to validate somebody. What you would want to look into is sending this password as a body of https post request, and then doing the validation of the password server side.
Secondly, there also happens to be absolutely no method of preventing a user going to the page, that you are trying to prevent them from going to. Instead of trying to even write the password. They can simply copy and paste it in the url window, or run the location.href in the console.
To put it better, if you want to authenticate somebody, you HAVE to do it server side and secondly you have to prevent access to the page, from users that are not logged in.
You can obfuscate it, but there's no way of protecting it completely.
Tool Link : obfuscator.io

Page renders for a second and then disappears - Vue JS

I'm new to using Vue and am trying to build a simple search feature that takes an input query and returns all users that match the query.
I'm attempting to do this by following along to a video demonstration of it.
I have no clue where I am going wrong as there is no error in my console, however I am currently facing an issue where the page loads and I can see the content for a second and then it flashes white and the page goes blank.
The code for the page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta id="X-CSRF-TOKEN" content="{{ csrf_token() }}">
<title>Laravel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
</head>
<body>
<div class="container" id="searchPage">
<h1>Real Time Search</h1>
<form class="form-horizontal" v-on="submit: false">
<div class="form-group">
<label class="control-label">Search:</label>
<input type="text" class="form-control" v-model="query" v-on="keyup: search">
</div>
</form>
<pre>#{{ $data | json }}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="assets/app.js"></script>
</body>
</html>
And my app.js script looks like this:
Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('X-CSRF-TOKEN').getAttribute('content');
new Vue({
el: '#searchPage',
data: {
query: '',
users: [],
},
methods: {
search: function() {
this.$http.post('/', { query: this.query } ).then(function(response) {
console.log(response);
}, function(response) {
// error callback
});
}
}
});
Where am I going wrong? Or what is causing this?
There are a couple of things here. Firstly, you are using Vue 2.0. In vue 2.0 the v-on="submit:..."; syntax is deprecated (in fact it looks like this syntax is from 0.12). If you want to stop the form submitting, you now need to add v-on:submit.prevent:
<!--This will stop the form from submitting -->
<form class="form-horizontal" v-on:submit.prevent>
You have a similar issue for v-on="keyup: search" which should be v-on:keyup="search"
<!-- Call the search method on keyup -->
<input type="text" class="form-control" v-model="query" v-on:keyup="search">
It's worth taking a look at the docs at: https://vuejs.org/guide/ to get familiar with the basic 2.0 syntax.
OK, a different, much simpler answer. I've just spent a couple of hours trying to solve the same symptoms. It turns out my problem was this:
Yup, I'd put "=" not "==" on the second condition. Now in VB you'd never have had that problem ...
Quite why this stops the whole page appearing without any errors in the console, I'm not sure, but I have to say in general I'm loving Vue JS (for the first time I can actually write client applications productively).

Zurb Foundation - Abide validation won't trigger

I'm trying to get Foundation's Abide validation working with a simple static form, but I'm not getting any errors or response from it. I'm expecting to see data-invalid attributes added to the invalid input elements, but they remain unchanged.
I've included Modernizr, jQuery and as far as I can see from the Zurb docs, all the dependencies that Abide requires. I don't care about CSS right now, just want to be able to have Abide validate the form.
Most of the following code has been taken from the Zurb Foundation docs:
<html>
<head>
<title>Abide test...</title>
<script src="js/modernizr.js"></script>
</head>
<body>
<form data-abide id="contact">
<div class="name-field">
<label>Your name
<small>required</small>
<input type="text" required>
</label>
<small class="error">Name is required and must be a string.</small>
</div>
<div class="email-field">
<label>Email
<small>required</small>
<input type="email" required>
</label>
<small class="error">An email address is required.</small>
</div>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/foundation.abide.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Can anyone see what's wrong with the above? All the .js files are loading, no 404 errors in Chrome console.
It seems that this piece of CSS is required:
meta.foundation-data-attribute-namespace {
font-family: false;
}
Foundation 5 seems to read its global namespace from the font-family property of meta.foundation-data-attribute-namespace (that's kinda weird).
Foundation.css is required. When I forked your fiddle and simply added foundation.css to external resources, data-invalid appends as you'd expect.

Cannot break on jquery.validate callbacks

I'm using Firefox/Firebug, trying to step through some of the jquery.validate() callbacks.
Why do breakpoints on the below // Breakpoint lines not trigger upon clicking the submit button?
<!DOCTYPE html>
<head>
<script type="text/javascript" src="/library/scripts/lib/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.js"></script>
</head>
<body>
<form action="/" method="post">
<input data-val="true" data-val-required="This is required" id="BirthDate"
name="BirthDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="BirthDate"
data-valmsg-replace="true"></span>
<p>
<input type="submit" /></p>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('form').validate({
debug: true,
submitHandler: function () {
alert("Submitted!") // Breakpoint
},
invalidHandler: function (form, validator) {
alert("Invalid!") // Breakpoint
}
})
});
</script>
</body>
</html>
Update
Actually, it doesn't seem like any of the validate() options are taking effect. For example, I've added debug: true to the example above, and per the documentation it's supposed to prevent the form from being submitted, and it's still submitting the form. None of the alerts are fired either.
However, I have confirmed that the validate() function is getting called, because I can step through that -- just not the callbacks.
Unfortunately, the jquery.validate() options don't seem to function when used in combination with unobtrusive validation. Removing that reference from my file fixes the issue, but of course, breaks my unobtrusive validation.
So I ended up using another solution to hook into the validation events.

Response after posting using jquery.form is not added to target div

I am using jQuery Form to post data. I am sending some response from the server that I want present in the div specified with the target option. I can see in firebug that the response is actually returned to the browser but the information is not turning up in the specified div.
I'm also using jQuery Multifiles in order to be able to upload more than one file. This part works fine and I can upload several files and those are presented on the server.
This is my own smicadminjavascripts.js
$(document).ready(function() {
$('#newticketform').bind('submit', function(e) {
e.preventDefault(); // <-- important
$(this).ajaxSubmit({
target: '#output'
});
});
});
my .html:
<html>
<head>
<script language='javascript' type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script language='javascript' type='text/javascript' src='jquery.MultiFile.js'></script>
<script language='javascript' type='text/javascript' src='jquery.form.js'></script>
<script language='javascript' type='text/javascript' src='smicadminjavascripts.js'></script>
<head>
<body>
<form id='newticketform' enctype='multipart/form-data'method='POST'>
<input type='hidden' name='MAX_FILE_SIZE' value='1000000' />
<label for='title'>Rubrik</label> <input type='text' id='title' name='title'/><br/><br/>
<label for='description'>Beskrivning</label> <textarea rows='15' cols='50' id='description' name='description'></textarea><br/>
<!-- The file element -- NOTE: it has an ID -->
<input class='multi' id='my_file_element' type='file' name='file[]' maxlength='5' >
<div id='files_list'></div>
<input type='submit' name='upload' value='Upload' />
</form>
<div id='output'></div>
</body>
</html>
What is my problem and how do I fix it?
Thanks!
I downloaded the jquery.form again (http://malsup.github.com/jquery.form.js) and replaced the it.
Still it didn't work. The problem was that the file wasn't downloaded to the development server again (using NetBeans/ftp). I had to check the box again in order to get it downloaded.
Now it works. Don't really know what the actuall problem was.

Categories