Zurb Foundation - Abide validation won't trigger - javascript

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.

Related

How to implement choose squares with street signs reCAPTCHA

I am making a website form and I would like to be able to use the type of reCAPTCHA where you select all the squares on an image, which contain a certain item (like a street sign). However, it doesn't explain it on google's documentation. This is how you would go about implementing a checkbox reCAPTCHA iN HTML:
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
I was wondering if you have to modify this in any way in order to get the image reCAPTCHA, or if there is a completely different piece of code I would have to implement.

Can't Set Focus in Safari

I'm trying to set focus to a particular edit field when a page opens or button is pressed. The following simple HTML/Javascript (Test.html) works with Firefox and Chrome but not Safari. Safari will clear the text with the clear button and post it with find button but not select it when the select button is pressed. Any help would be appreciated. (iOS 7 on an iPad 2)
Update -- Replaced with working code
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
EDITED TO INCLUDE .focus()
Try
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
Mobile devices, in particular iOS can be quite funny about select();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
EDIT: A note on input focus without user interaction
As found by #zappullae
It appears that in recent versions of iOS, Apple require user interaction in order to activate the keyboard, so this will not be possible on page load.
https://medium.com/#brunn/autofocus-in-ios-safari-458215514a5f

How to setup jquery plugin into my codeigniter project using eclipse-mars IDE

I have downloaded jquery-validation-1.14.0.zip file from web. And know I am trying to use it in my project, but the problem with me is i don't know exactly where to place the folder(extracted file) in my wamp folder, and what are the changes to be made on any of the config or .htaccess file. As i have given all my complete 3-4 days to configure it by my own, but finally left with no options and i am posting my question here so that anyone here can help me out.
basically here is my
folder sructure;-
C:\wamp\www\developer\jquery-validation
controller:-
C:\wamp\www\developer\application\controllers
How do i use to call the script file in my view:-
<html>
<head>
<script type="text/javascript" src ="../jquery-validation/lib/jquery.js"> </script>
<script type="text/javascript" src ="../jquery-validation/dist/jquery.validate.js"> </script>
</head>
And another thing that i would like to emphasis here is, in eclipse-mars, i have included jquery library too. And now i have jquery 2.0 library inside Javascript Resources.
After doing all these when i simply try to use alert function, i got to see lots of errors.
Errors:-
GET
http://localhost/developer/index.php/jquery-validation/lib/jquery.js [HTTP/1.1 404 Not Found 27ms]
GET
http://localhost/developer/index.php/jquery-validation/dist/jquery.validate.js [HTTP/1.1 404 Not Found 30ms]
ReferenceError: $ is not defined
Please get me rid of all these anyhow.. Now i'm totally frustrated..
Very Very Thanks in advance..
the problem remains the same #praveen and # ichadhr. For more clarification of my code, here is a simple view:
<html>
<head>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/lib/jquery.js');?>" ></script>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/dist/jquery.validate.js');?>"></script>
</head>
<body>
<form method="post" id="myform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<button type="submit" class="btn btn-default" id="sub">Submit</button>
</form>
<script>
$("#sub").click(function(){
alert("hello");
$("#myform").valid();
});
</script>
</body>
</html>
And my base url is localhost/developer
and the folder and file locations for js file are as in my code.
Errors are still same
All included assets bind with
base_url('path/to/script.js');
And all links generate with
site_url('controller/action/param');
After Seeing your new description assuming files are in your views folder inside application So the becomes :-
<html>
<head>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/lib/jquery.js');?>" ></script>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/dist/jquery.validate.js');?>"></script>
</head>
<body>
<form method="post" id="myform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<button type="submit" class="btn btn-default" id="sub">Submit</button>
</form>
<script>
jQuery(document).ready(function($){
$("#sub").click(function(){
alert("hello");
});
});
</script>
</body>
</html>

Why isn't my Jquery Validate working?

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.

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