Why Foundation 6.3.1 form validation does not display the error message?
I follow this code from their site:
$(document).foundation();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/plugins/foundation.abide.js"></script>
<form data-abide novalidate>
<label>
Amount
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" id="exampleNumberInput" type="number" required pattern="number"/>
</div>
<span class="form-error" data-form-error-for="exampleNumberInput">Amount is required.</span>
</label>
<button class="button" type="submit" value="Submit">Submit</button>
</form>
The text Amount is required. should appear when error occurs but it does not.
Any ideas why?
Related
I am trying to upload the file "pdf " to google drive through google app script, but I get an error when I click the button. Also, I wanted to use the array bytes but I don't know how to do because without the array bytes I must disable the chrome v8.
Error message :
2495449455-mae_html_user_bin_i18n_mae_html_user__ar.js:56 Uncaught
InvalidArgumentError: Failed due to illegal value in property: 0
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<?!=include('css');?>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> PDF Collector</title>
<div align="center">
<p><img class="responsive-img offset-m3 s12 "
src=""></p>
</div>
</head>
<body>
<div id="msg" class="col m6 offset-m3 s12" align="center" style='color: red' >
<div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col m6 offset-m3 s12 ">
<div class="input-field">
<input placeholder="Your Id" id="employeeId" type="number" class="validate" required pattern ="^\d{10}$" >
<label class="active" for="id">Your Id</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="fullname" type="text" class="validate" disabled >
<label class="active" for="name">Full Name</label>
</div>
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" name="myFile">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<button id="btn" class="btn waves-effect waves-light" type="submit"
name="action" > Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="row">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
JS Code
document.getElementById('btn').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
})
function onSuccess(data){
document.getElementById('msg').innerHTML = "Thanks for Uploading";
}
This the function in .gs
function uploadFiles(data)
{
var file = data.myFile;
var folder = DriveApp.getFoldersByName(collected-Pdf);
Logger.log(folder);
var createFile = folder.createFile(file);
}
On the line google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode) I don't think you can just send an entire html node to the server, it probably tried to parse it as a json or something and failed, pretty much the most you can do is send the file itself
google.script.run.withSuccessHandler(onSuccess).uploadFiles(document.getElementsByClassName("myFile").files[0])
Plus the parent node of the button isn't the input element anyway, yet you are trying to access the .myFile element of it but I don't think class names are added to the server like that, but even if they were that would only be accessing the input element itself not the .files property of it
I have found the answer after dividing the code and test each code one by one. It turned out that the name="action and waves-effect are the reason to stop the code from running. I don't know why but it is working now after removing them from html.
<button id="btn" class="btn waves-light" type="submit"
" > Submit
<i class="material-icons right">send</i>
</button>
I'm trying to use a datepicker and a time picker in my html form. My code is below :
<div class="form-group" style="width: 50%;">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker" name="date" >
</div>
<!-- /.input group -->
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<label>
And I use the inclusions below:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
<script type="text/javascript" src="plugins/datepicker/locales/bootstrap-datepicker.fr.js"></script>
<script type="text/javascript" src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
The html is working fine, I can see the datepicker field but I can't use it, the timepicker seems to got the same problem.
When I click on it, the calendar or the timepicker are not opening.
What is wrong?
where is your javascript to initialize fields and convert to datepickers? if you only do html markup, fields know nothing about functionality.
use this:
$('#datepicker').datepicker();
but first! read the docs...
I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I am trying to use parsley.js validation using simple form but is not working. My cdn is working correctly but I am not getting any validation. The code is:
<!doctype html>
<html>
<head>
<title>Parsley.js form validation</title>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.6/parsley.min.js"></script>
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css">
<script>
$('.parsley-validate').parsley();
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 offset3">
<h2>Parsley.JS</h2>
<form role="form" class="parsley-validate" data-validate="parsley">
<label>Name</label>
<input type="text" class="form-control" name="name" data-parsley-required="true"><br/>
<label>Email</label>
<input type="text" class="form-control" name="name" data-parsley-required="true" data-parsley-type="email" data-parsley-trigger="change" /><br/>
<label>Website</label>
<input type="text" name="name" class="form-control" data-parsley-required="true" data-parsley-type="url" data-parsley-trigger="change" /><br/>
<input type="button" value="submit" class="btn btn-success"/>
</form>
</div>
</div>
</div>
</body>
</html>
You are calling $('.parsley-validate').parsley(); in the <head> before the form exists. Move the script to the end of the <body> or wrap it in a document ready:
<script>
$(function(){
$('.parsley-validate').parsley();
})
</script>
I don't believe you need to use the data tags to validate if you are calling $('.parsley-validate').parsley();. Look at the warning under this section on the docs: Parsley.js Javascript Installation
EDIT: I should have been more specific, you don't need data-validate='parsley on the form when also using $('.parsley-validate').parsley(). That is what the above link points out. Of course, you can still use data tags on elements to define validations.
I'm trying to use jQuery Validation Engine to validate input fields. I'm using it on a page, which requires bootstrap for it's design.
For some reason, the validation engine doesn't work, and no errors are being thrown.
I've gone through some questions here on stackoverflow, but nothing seems to be helping.
(All my links/relations are correct).
Here's my code:
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
</script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
</script>
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#fm").validationEngine();
});
</script>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-picture"></i>Change Password</h2>
</div>
<div class="box-content">
<form action="#" id="fm">
<div class="control-group">
<label class="control-label" for="disabledInput">Email</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" type="text" value="<?php echo $ret['email']; ?>" disabled="">
</div>
</div>
<input type="text" name="test" id="test" class="validate[required] text-input">
<input type="submit" name="submit">
</form>
</div>
</div><!--/span-->
</div><!--/row-->