Mi Lu Mi Lu - 5 months ago 16
Javascript Question

jQuery works in one case, but doesn't work in the other case in JSFiddle

I found a good example for me in JSFiddle with jQuery validation. But when I made another code on the similarity of the working code - it's dosen't work. What I do wrong?

<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">

<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Email">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="password" name="password" id="password" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="password" name="confPassword" id="confPassword" placeholder="Confirm Password">
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
</div>
</form>


$(document).ready(function () {

$('#contact-form').validate({
rules: {

email: {
required: true,
email: true
},
password: {
minlength: 2,
required: true
},
confPassword: {
minlenth: 2,
equalTo : "#password"
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});

});


And connected these plagins:


jquery.validate.js additional-methods.js bootstrap-combined.min.css
bootstrap.min.js


working code,
my code

Answer

One thing to keep in mind about accessing protocol, your JSFiddle is accessing through HTTPS protocol.

Your JSFiddle

  • Your JSFiddle had external resources with HTTP protocol. I would suggest updating the resources to use HTTPS, not HTTP, protocol because the console output from JSFiddle display Blocked loading mixed active content error.
  • Be sure your JSFiddle JavaScript option should load jQuery. You can select the option that fits your requirement.

Alternatively, you could access your JSFiddle through HTTP protocol: http://jsfiddle.net/5WMff/.

Local Server

To work on local server, I would suggest download a copy of each external resource and save in a folder accessible to web application as shown in the screenshot and update the <head> tag to include <script> and <link/> tags for loading external resources.

<head>
    <script type="text/javascript" src="/test-web/scripts/jquery/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/test-web/scripts/jquery/jquery.validate-1.11.1.js"></script>
    <script type="text/javascript" src="/test-web/scripts/jquery/additional-methods-1.11.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/test-web/scripts/jquery/bootstrap-combined.min-2.3.2.css"/>
    <script type="text/javascript" src="/test-web/scripts/jquery/bootstrap.min-2.3.2.js"></script>
</head>

Alternatively, you could use the URL to use for src or href attributes to fetch external resources from the Internet.

enter image description here

This worked on my local server as shown below. Please let us know whether this worked out on your end.

Wrong Email

enter image description here

Correct Email

enter image description here