I love Parsley's style of form validation with beautfiul background-color at the form elements (green -> correct, red -> wrong), but I can't figure out how to implement this.
I followed the instructions line per line, but it's not working. Maybe my other js resources disturb the flow, so I made a plain new html site, but it also doesn't work either.
What am I doing wrong?
My plain .html looks like that:
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.2/bootstrap.min.js"></script>
<script type="text/javascript" src="pars/parsley.js"></script>
</head>
<body>
<form id="demo-form" data-validate="parsley">
<label for="fullname">Full Name * :</label>
<input type="text" id="fullname" name="fullname" data-required="true" />
<input type="submit" value="ok" />
</form>
</body>
</html>
I'm leaving the field blank, click "ok", and nothing happens.
I was able (don't ask me how) to run Parsley for a short time, but without the fancy background-colors. Do you know what to do?
Parsley does not manage colors / UI. It justs add / remore css classes depending on validation.
By default: parsley-error and parsley-success. They could be changed in parsley config.
But you will have still to do some css to tell that parsley-success for example has green background and parsley-error a red one.
Related
I'm following the Material Design Tutorials here. The tutorial follows a Node JS approach and makes use of npm to install the material design components. This is fine and I get the MDC 101 project running exactly as in the tutorial. The text box label floats nicely to the top left as soon as I start entering in the text as shown at the bottom of the page here.
However, I want to use the Material Design Components in my Scala Play web service and so I inserted the CSS link and JS scripts into my webpage (code below) as described here. The HTML for my page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrine (MDC Web Example App)</title>
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
<div class="mdc-text-field mdc-text-field--box username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field mdc-text-field--box password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="button-container">
<button type="button" class="mdc-button cancel">
Cancel
</button>
<button class="mdc-button mdc-button--raised next">
Next
</button>
</div>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>
If you render this in the browser, it can seen that whilst the MDC Text Fields are displayed, the labels do not float like in the tutorial example running under Node.
What am I missing here? I suspect it is something to do with some Javascript not getting activated (Javascript noob here)
You need to instantiate the MDC textfield component. One quick and dirty way to do that is to just add a script tag to your html with the following JavaScript.
<script>
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>
For future visitors who followed the official getting started guide to install MDC with webpack, what worked for me is simply to add initialize the TextField in the JS file bundled (as mentioned in the docs):
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
This Jquery is a terrible kludge that I'm not proud of, but it does work and doesn't require the import statement.
<script type="text/javascript">
$(document).ready(function() {
$("#user-input").val("Player One");
$("label[for='user-input']").addClass("mdc-floating-label--float-above");
$("#user-input").focus();
$("#user-input").blur();
});
</script>
It sets the value, adds the class required to make the label float, and then quickly adds and removes focus to the text field, which triggers the outline code in MDC to remove the outline notch.
I have spent HOURS trying to get any new timepicker to work (previously used https://github.com/weareoutman/clockpicker which was great but always went off screen on mobile phones).
Most seem to be for Bootstrap 2.x and I cannot get any to work. Finally got https://github.com/Eonasdan/bootstrap-datetimepicker going (not great on a mobile but...)
My problem is I have lots of tiny input fields for dates so I need to get rid of the glyphicon and just onclick on the input field itself.
I have included my little test page in case anyone else is struggling. I did not realize that I needed moment.js and that cost me a very irritating 30 minutes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/moment.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<form class="form">
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false, minuteStepping:5,
});
});
</script>
</div>
</div>
</html>
EDIT: This is beyond weird. Got rid of the glyphicon. Put the other span around the input. Works but with a big ugly border. Tried disabling the input-group-addon class by changing it to adxxdon and worked perfectly (well no rounded corners). I then tried without that class and it stopped working. So looks like some sort of regex within span is going on.
I am well at the end of my JS/CSS ability. If anyone has a tidier solution I would be grateful.
It's easy. Just refer to the documentation :)
http://eonasdan.github.io/bootstrap-datetimepicker/#example6
According to the documentation this should be no big deal.
Just use one property in javascript as below
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false,
minuteStepping:5,
allowInputToggle: true
});
});
</script>
allowInputToggle: true //if this property is set true, this will allow opening
of datetimepicker dropdown on both icon click as well
as on input field click.
Use
allowInputToggle : true;
Default: false
If true, the picker will show on textbox focus and icon click when
used in a button group.
I have just downloaded jquery numeric plugin and already added jquery library too but still it's not working so if you people can take a look at my code as please :
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>
</head>
<p>How many Questions would you like to have in your form?</p>
<form action="" method="post">
<input class="positive-integer" name="questions" placeholder="Type questions number in digits as e.g 5" style="width:19%;" type="text" />
<input type="submit" name="submit" value="Submit">
</form>
It should have to work on the input as for class="positive-integer" :
<input class="positive-integer" name="questions" placeholder="Type questions number in digits as e.g 5" style="width:19%;" type="text" />
So if you people can please take a look at my code..!
Here is live link to the file as : http://www.huntedhunter.com/php-login/test/questions.php
i can't see this code on view source page add this code on page.
$(function(){
$('.positive-integer').numeric();
})
Demo
You must initialize the plugin in order to make your example work..
Include this in your page
<script type="text/javascript">
$(function() {
$(".positive-integer").numeric()
});
</script>
So here's my html code (Important part is in the triple quotations):
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
"""<script type="text/javascript" src="ToDoApp.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>"""
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list">
<ol></ol>
</div>
<div class = "counter">
<h4>Things to do:</h4>
</div>
<div class = "comment"></div>
</body>
</html>
and my .css connection is working perfectly, but my .js/jquery connection is just not functioning. I've tried looking up correct html syntax for including a link, and I tried alternating among a few different links to the jquery library. Is there something I'm missing here, have I put the link in the wrong place, or is the syntax funky? Thanks in advance for any help.
If your ToDoApp.js relies on jQuery then you will need to change the order of your code.
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="ToDoApp.js"></script>
Otherewise, the code that you have supplied shows not reliance on jQuery.
The best way I have found to debug issues with JS or CSS files not being included, is to monitor the network traffic with your browsers Debugging tools.. In IE, press F12, and then click on the Network tab. Click 'Start Capturing' and re-navigate to the page.
If a 404 is returned, the path is probably wrong.. From here, you can look at the path the application actually tried to request its file from.
Other errors require different investigations. If you don't even see the file show up in the requests list, then check the Console tab to see if the browser has logged any messages that may pertain to the situation. As per Jeff's answer, if the problem is that something in your ToDoApp.js relies on jQuery, then you will see messages in the console that point to that issue, such as $ is undefined.
Hello Stackoverflow people!
I'm making a mobile website using the latest jquery mobile (1.2.0). I have a form and I want the submit button change text/value on click. I have a code that works in a empty html page:
<body>
<form method="get" action="/show.php?" target="showframe">
<select name="week">
<option value="1">Week</option>
</select>
<select name="id">
<option value="1">ID</option>
</select>
<input type="hidden" name="type" value="2">
<input type="submit" value="Load" id="show" onclick="javascript:document.getElementById('show').value='Refresh'">
</form>
<iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>
But when I copy and past the submut button in my jquery page it wont change value..
My question is: how do i get this to work in jquery mobile? what is an alternative?
Thanks in advance
EDIT:
I have tried jivings answer and this is it:
<html>
<head>
<title>Infoweb Mobiel - Dominicus College</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/style.js"></script>
<script>
$("#show").click(function () {
$(this).val('Refresh');
});
</script>
</head>
<body>
<form method="get" action="/show.php?" target="showframe">
<select name="week">
<option value="1">Week</option>
</select>
<select name="id">
<option value="1">ID</option>
</select>
<input type="hidden" name="type" value="2">
<input type="submit" value="Load" id="show" $("#show").button("refresh");>
</form>
<iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>
but it doesnt work.. i think im doing something wrong. where and how do i have to place $("#show").button("refresh"); ?
This is because the text that you're seeing isn't actually part of the button element. JQuery Mobile pads the button out with it's own elements to create the style you see. If you want it to refresh these elements when you make a change then you need to call the refresh() method on the button:
$("#show").button("refresh");
Also, since this is jQuery, you should be using handlers properly. You onclick should be with the rest of the JavaScript logic, either in the head or in an external file and look like this:
$("#show").click(function() {
$(this).val('Refresh');
});
First you need to understand few things about the jQuery Mobile:
What you did in your EDIT part was wrong, you cant use $("#show").button("refresh") in a HTML block. Java script can not be mixed with a HTML like that.
This is an example how this should work: http://jsfiddle.net/Gajotres/K8nMX/.
Code:
$('#index').live('pagebeforeshow',function(e,data){
$(document).on('click', '#show', function(){
$('#show').attr('value','Show');
$('#show').button("refresh");
$('#custom-form').submit();
});
});
In the case of my example index is an id of my jQuery Mobile page. Pagebeforeshow is an event that will be triggered before the page can be shown:
$('#index').live('pagebeforeshow',function(e,data){
Your button type was changed to button. Reason is, you cant change button text (or anything else) while form is submitting it data to php server:
<input type="button" value="Load" id="show">
That is why we are binding a click event to the button in this line :
$(document).on('click', '#show', function(){
Next line, we are changing the button text:
<input type="button" value="Load" id="show">
Because this is a jQuery Mobile styled button we need to refresh him so the new style can be applied:
$('#show').button("refresh");
Finally we are triggering form submit:
$('#show').button("refresh");
Before you continue please read this article: http://jquerymobile.com/test/docs/api/events.html. There you will find everything you need to know about jQuery Mobile page events.
Also read this article about anatomy of jQuery Mobile page: http://jquerymobile.com/test/docs/pages/page-anatomy.html
As you are new to this page take a look at this article, it will help you get a better response in the future. I hope this was an answer to your question. Feel free to leave a comment if you have more questions.