I'm changing over from Java to Javascript as I'd like to expand my programming capabilities, and I'm not sure why but I'm having a really hard time adjusting. For example, I'm not even sure why I can't get the Javascript function to run, nevermind actually work the way I want it to.
I feel like I might not have the JS wired up to my HTML document properly, but I have included the correct filename within a script tag, and the two files are within the same folder, so why isn't the JS function even being called?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>To-do Webapp</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styling.css">
</head>
<!-- scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="script.js"></script>
<body>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task"/>
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button onclick="addTask()">Button element</button>
</div>
</div>
</form>
</body>
JS
function addTask() {
"use strict";
/*global document: false */
document.alert("hello");
}
It is window.alert("hello");, not document.alert("hello");
And inline script is not recommended, use addEventListener instead
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('button').addEventListener('click', addTask);
});
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
Note, the line adding the event listener needs to be called after DOM loaded, as seen in above code sample, or in a script at the end of the body, as shown in below sample.
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
<script>
document.querySelector('button').addEventListener('click', addTask);
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
</script>
Related
And I have use to taken data from form on ps1 script and web services with php code so the page request takes time. The users click the button again and again this process time.
I try jQuery click event but it is stopped the form submission.
myHTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>xxx</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/guncelle.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<div class="bg"></div>
<body class="text-center bg body3">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead">
<div class="inner">
<!--<h3 class="masthead-brand"><img src="image/xxx.png" style="width: 100px;height: 100px"></h3>-->
<nav class="navbar navbar-expand-sm navbar-dark justify-content-center">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.php">xxx</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sifirla.php">Sıfırla</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="guncelle.php">Güncelle</a>
</li>
</ul>
</nav>
</div>
</header>
<div><img src="image/xxx.png" alt="xxx" style="width: 150px;height: 150px;"></div>
<div>
<?php echo $result; ?>
</div>
<main role="main" class="inner cover">
<form id="form1" name ="form1" method="POST" action="guncelle.php" >
<div class="form-group">
<label for="uname">Kullanıcı Adınız:</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<span id="unametxt" name="unametxt" class="required"></span>
<div class="form-group">
<label for="password">Mevcut Şifreniz:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<span id="passwordtxt" name="passwordtxt" class="required"></span>
<div class="form-group">
<label for="newPassword">Yeni Şifreniz:</label>
<input type="password" class="form-control" id="newPassword" name="newPassword" maxlength="15">
</div>
<span id="newPasswordtxt" name="newPasswordtxt" class="required"></span>
<div class="form-group">
<label for="new2Password">Yeni Şifreniz Tekrar:</label>
<input type="password" class="form-control" id="new2Password" name="new2Password" maxlength="15">
</div>
<span id="new2Passwordtxt" name="new2Passwordtxt" class="required"></span>
<!--<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdLWVsUAAAAANupQHCmg_28mFmc__o6ZwybziOK"></div>
</div>
-->
<p><input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle" ></p>
</form>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>#2018 xxxx</p>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When this form submitted , I controlled php side like this:
if (isset($_POST['Submit1'])) {
and then I use this data with webservice, according that I have run ps1 script. Finally i show alert on the form error or success with all process.
I want to disable the button when form submitting. How can I this?
You can use onsubmit event in the form to do it. Please add the onSubmit event in the form as below
<form id="form1" name ="form1" method="POST" action="" onsubmit="$('#Submit1').attr('disabled', 'disabled'); return true;">
Try with this code
<input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle">
<script>
$(document).ready(function(){
$('#form1').on('submit',function(e){
e.preventDefault();
$('#submit1').prop('disabled','disabled');
});
});
</script>
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;">
<div class="row" style="padding-bottom: 5%;">
<div class="col-lg-offset-1 col-lg-4">
<h3 style="color:#00B0F0;">Choose your phone numbers<h3>
</div>
</div>
<form action="deuxiemeBis.php" method="POST">
<div class="row">
<div class="col-lg-offset-1 col-lg-4">
<div class="form-group phone1">
<input type="tel" class="form-control" name ="phone1" id="phone1">
</div>
<div class="form-group phone2">
<input type="tel" class="form-control" name ="phone2" id="phone2">
</div>
<div class="form-group phone3">
<input type="tel" class="form-control" name ="phone3" id="phone3">
</div>
</div>
</div>
<div class="row">
<br><br>
<div class="col-lg-offset-1 col-lg-3">
<button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;">+More infos</button>
</div>
</div>
<div class="row">
<br>
<div class="form-group col-lg-offset-1 col-lg-6">
<div id="demo" class="collapse">
<textarea rows="3" name="comment" class="form-control" form="usrform"></textarea>
</div>
</div>
</div>
<div class="col-lg-offset-9 col-lg-3"><br>
<div class="form-group">
<button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.
So my question is: how do you specify that only the submit button will actually submit the form ?
That's because you didn't specify the type for that button and submit is the default type. Set the type='button' and it will no longer act as a submit.
I have 2 html page and one app.js
my search-movie.html code as the following :
<!DOCTYPE html>
<html ng-app="adphorusWork">
<head lang="en">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="searchMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
OMDb Api
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>My Github</h2>
</div>
<div class="bs-component">
<form class="well form-search" id="search-movie" onsubmit="return false;">
<fieldset>
<legend>Search Movie</legend>
</fieldset>
<div>
<label class="control-label" for="movie-name">Movie Name : </label>
<input type="text" id="movie-name" class="input-small" style="margin-left: 10px;">
<button id="btn-search-movie" type="button" class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovie()">
<span class="glyphicon glyphicon-search"> Search</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and my result-movie.html code as the following :
<!DOCTYPE html>
<html>
<head ng-app="adphorusWork">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body ng-controller="resultMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
OMDb Api
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>My Github</h2>
</div>
<div class="bs-component">
<fieldset>
<legend>Result for Search Movie</legend>
</fieldset>
<div>
<button id="btn-result-movie" type="button" class="btn-sm btn-primary" style="margin-top: 40px;" ng-click="backtohome()">
<span class="glyphicon glyphicon-circle-arrow-left"> Home</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and my app.js as the following :
(function (angular) {
'use strict';
var app = angular.module('adphorusWork', []);
app.controller('searchMovieController', function ($scope) {
$scope.searchMovie = function () {
alert("come")
}
});
app.controller('resultMovieController', function ($scope) {
$scope.backtohome = function () {
alert("home")
}
});
})(angular);
My search button is working (in search-movie.html) but my 'Home' button not working(in result-movie.html)
I'm using the same ng-app in two html page. I want to work on other button(so Home button)
Where am I doing wrong ? or How can I fix this error ?
you need to use Angular Ui router for this. And #Lex is correct you are not following the angular SPA framewrok.
This is a good read :https://github.com/angular-ui/ui-router
this link can provide a brief detail about angular ui router https://scotch.io/tutorials/angular-routing-using-ui-router
You don't have:
<script src="app/app.js"></script>
in your result-movie.html page. The bigger question, though, is why are you structuring it like this? Angular is designed as a single page application (SPA) framework. The way you are buidling it I think you are going to end up with a lot of issues long term.
I have noticed that you not include in result-movie.html page
<script src="app/app.js"></script>
as for best approach is you can use ngRoutefor data passing between controllers
I am using jquery mobile and have a collapsible set.
When using a function to change its innerHTML it works just fine. Displaying the content inside as collapsibles.
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
</div>
works when using:
document.getElementById("doro").innerHTML ='<div data-role="collapsible">
<h3>Click me - Im collapsible!</h3>
<p>I'm the expanded content.</p>
</div>'
but when i try:
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
while:
function refreshPage(){
var text = "<div data-role='collapsible'><h1>Click me - I'm collapsible!</h1><p>I'm the expanded content.</p></div>";
document.getElementById("doro").innerHTML = text;
}
It changes the collapsible set I have into just text without the jqueryMobile css and javascript attached.
That's sort of what it looks like
function refreshPage()
{
var text = "<div data-role='collapsible'><h1>Click me</h1><p>I'm the new expanded content.</p></div>";
document.getElementById("doro").innerHTML =text;
}
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!doctype html>
<html><head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="panel" id="left-panel" data-display="overlay">
<h2></h2>
<form id="checkuser" name="checkuser" method="post" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
</fieldset>
</form>
</div>
<div data-role="header">
<h1></h1>
Add
</div><!-- /header -->
<div data-role="content">
Star button
<p id="demo">
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div></p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
this is a simplified example that won't work aswell, and I don't get why
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" id="name"> </div>
<script>
document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';
function refreshPage(){ document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';}
</script>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
When you are dynamically creating jQuery mobile widgets after the page has already been enhanced, you have to initialize the widgets yourself in one of the following ways:
Call .enhanceWithin() on the container element.
Call the individual widget intializer, e.g. .colapsibleset(), .collapsible(), etc.
For your example, you could do the following. Given a button and a container DIV with id="name":
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" >
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" />
<div id="name"></div>
</div>
</div>
On pagecreate, dynamically add the collapsibleset to the container and call enhanceWithin(). Also add a click handler to the button which calls refreshPage(). refreshPage() replaces the html in the container and again calls enhanceWithin().
$(document).on("pagecreate", "#pageone", function(){
$("#name").html('<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>').enhanceWithin();
$("#submit").on("click", function(){
refreshPage();
});
});
function refreshPage(){
var text = '<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible 2!</h3><p>Im the expanded content from button.</p></div>';
$("#name").html(text).enhanceWithin();
}
Working DEMO
Also, in your second code snippet, you are loading 2 different versions of jQuery. Use either 2.1 or 1.11 but not both.
i'v been running in trouble, with my Bootstrap contact form. It seems to be important at which time the javascript files are loaded.
Depending on the placement some things doesn't work correctly:
If so:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
my contact form will don't work. Click on "SUBMIT"-Button and nothing happens. But the collapse menu button of bootstrap works fine.
If loading order is like this:
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
the contact form (especially the subimt button) works as expected. But the collapse
bootstrap menu button don't work fine. It is unclickable.
I tried everything but I don't know the reason for that behavior.
Do you have an idea, how to make both things work each other?
Here come's my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1"> <span class="text">MENU 1</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2"> <span class="text">MENU 2</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div class="row">
<div class="col-12">
<p>TEST</p>
</div>
</div>
</div><!-- /container -->
</div>
<div class="slide story" id="slide-2" data-slide="2">
<div class="container">
<div class="row">
<div class="col-12">
<div class="well">
<form id="contact-form" class="form">
<fieldset>
<legend>Contact Form</legend>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name" name="name1" placeholder="name"/>
</div>
<div class="form-group">
<label for="name" class="control-label">E-Mail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="email"/>
</div>
<div class="form-group">
<label for="name" class="control-label">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="phone"/>
</div>
<div class="form-group">
<label for="name" class="control-label">message</label>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button value="Send" class="btn btn-primary" type="submit" id="submit" name="submit">Send</button>
<button type="reset" class="btn">Clear</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div><!-- /container -->
</div>
<!-- Java-Scripts -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/script.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/val55.js"></script>
</body>
</html>
This is what the val55.js-File looks like:
$(document).ready(function() {
$("#contact-form").validate({
rules: {
name1:{
minlength: 3,
maxlength: 20,
required: true
},
email:{
minlength: 3,
required: true,
email: true
},
phone:{
minlength: 3,
required: true
},
message: {
minlength: 10,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
submitHandler: function(form) {
//form.submit();
alert('Hallo');
}
})
}); // end document.ready
Regards,
John
Do this:
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/script.js"></script>
<script src="js/val55.js"></script>
You might need to switch between the last to scripts and everything should work fine provided you don't have any errors in your javascript.