I am trying to introuduce jQuery datepicker to my MVC4 application but I cannot seem to get the click event to fire the datepicker widget. At http://jqueryui.com/datepicker/ they give a simple example of how to implement this and when I try locally it works as expected but on MVC4 application nothing:
My code is as follows:
<script src="#Url.Content("~/Scripts/jquery-2.0.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#expirydate').datepicker();
});
</script>
<div class="nine columns bottom20">
<div class="row">
<h3>New Course details</h3>
#using(Html.BeginForm("NewCourse","Admin",FormMethod.Post))
{
<div class="row">
<div class="twelve columns" style="width:590px;">
<div class="row">
<div class="six columns">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
</div>
<div class="six columns">
<label for="author">Author:</label>
<input type="text" id="author" name="author" /><br />
</div>
<div class="row">
<div class="twelve columns" style="width:590px; margin-left:5px;">
<label for="description">Description:</label>
<input type="text" id="description" name="description" /><br />
</div>
</div>
<div class="twelve columns" style="width:590px;">
<div class="row">
<div class="six columns">
<label for="participationpoints">Participation Points:</label>
<input type="text" id="participationpoints" name="participationpoints" /><br />
</div>
<div class="six columns">
<label for="expirydate">Expiry Date:</label>
<input type="text" id="expirydate" name="expirydate" /><br />
</div>
</div>
</div>
<div class="row">
<div class="six columns">
<input type="hidden" id="uploaddate" name="uploaddate" /><br />
</div>
</div>
</div>
</div>
</div>
<div class="twelve columns">
<input id="CourseSubmit" type="submit" value="Submit button" class="medium button bottom20"style="margin-left:210px; margin-top:-50px;" />
</div>
}
</div>
</div>
Any ideas what is going on here?
Other scripts in the layout are as follows:
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src= "#Url.Content("~/Scripts/meta-app.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/filedrag.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.sortable.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.filter.js.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.paginate.js")"></script>
And my bundle config is as follows:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery.js",
"~/Scripts/foundation.min.js",
"~/Scripts/modernizr.foundation.min.js",
"~/Scripts/jquery{version}.js",
"~/Scripts/jquery.carouFredSel-6.0.3-packed.js",
"~/Scripts/jquery.touchSwipe.min.js",
"~/plugins/slider-revolution/jquery.thempunch.plugins.min.js",
"~/plugins/slider-revolution/jquery.thempunch.revolution.min.js",
"~/plugins/flexislider/jquery.flexslider.js",
"~/plugins/camera/scripts/camera.min.js",
"~/plugins/camera/scripts/jquery.easing.1.3.js",
"~/plugins/camera/scripts/jquery.mobile.customized.min.js",
"~/plugins/titan/js/jquery.titanlighbox.js",
"~/plugins/titan/js/prettify.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/footable.js",
"~/Scripts/footable.sortable.js",
"~/Scripts/footable.filter.js",
"~/Scripts/footable.paginate.js",
"~/Scripts/jquery-2.0.2.js",
"~/Scripts/jquery-ui-1.10.3.js",
"~/Scripts/jquery.validate.unobtrusive.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.10.3.js",
"~/Scripts/jquery-ui-{version}.js"));
You are rending jQuery twice, once in your layout and again on your view. This could be causing the issue you are seeing.
the correct code:
$('#datepicker').datepicker();
check your css file jquery-ui.
Selector in jquery
#= ID
. = class
by some attribute
$('a[href=www.google.com]')
Related
I have a Bootstrap datetimepicker component in my code that was working a few weeks ago but has stopped working. I appreciate any help getting to start working again.
Find below my HTML code:
<script src="https://cdn.jsdelivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis#latest/dist/moralis.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="js/jquery.easing.1.3.js+jquery.waypoints.min.js+jquery.stellar.min.js+owl.carousel.min.js.pagespeed.jc.AgoWNHbz_d.js"></script></script>
<script src="js/jquery.toolbar.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js+popper.min.js+bootstrap.min.js.pagespeed.jc.ln39gZSjGk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6-beta4/js/tempus-dominus.min.js"></script>
<form action="" method="post" class="datepickers">
<div class="form-group">
<div class="input-group date" id="id_0">
<input type="text" value="10/01/2019 05:32:00 PM" class="form-control" required />
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".datepickers").click(function(){
$("#id_0").datetimepicker();
alert("MammazZ!");
});
});
</script>
</div>
</div>
When I click within the datepickers input field as illustrated below:
The MammazZ alert is fired, followed by
a slight change (the seconds are omitted) as illustrated below:
Please help me resolve this!
I think the problem is due to an incompatibility in imports and the sequence of imports. In case you want to use bootstrap 5, things get more easy
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="container">
<h2 class="py-2">Datepicker in Bootstrap 5</h2>
<form class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col-5">
<input id="date" class="form-control" type="date"/>
</div>
</form>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
im trying to make a website, and I need a calendar so that the users can plan in a meeting. I tried getting a datetime picker from the internet, but when I run the page and press the button, the calendar is not opening. (im doing this in visual studio code ASP.net C#/html). I have no idea why
Here is the code:
#page
#model IndexModel
#{
ViewData["Title"] = "Test";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
It's best to use the native date picker to avoid cross-browser issues.
Remove these lines of code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
And replace this line:
<input type='text' class="form-control" />
With this line:
<input type='date' class="form-control" />
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='date' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
When I want to submit multiple files in a form, I get an array of files with an extra empty element, but only if JavaScript is enabled, when I disable JavaScript, the post file is correct with same number of files.
This is the form with file input:
<form method="POST" action="connecterDeposerControlleur.php" id="form_connecter_deposer" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label for="titre" class="control-label">Titre:</label>
<input type="text" class="form-control" id="titre" name="titre">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Description:</label>
<textarea class="form-control" id="message-text" name="description"></textarea>
</div>
<div class="form-group">
<label for="prix" class="control-label">Prix (DH):</label><br />
<input type="number" class="form-control" id="prix" name="prix">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Categorie:</label>
<select class="form-control" id="categorie-select" name="categorieId">
<option value="">Choisir la catégorie</option>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Sous Categorie:</label>
<select class="form-control" id="souscategorie-select" name="souscategorieId">
<option value="">Choisir la sous catégorie</option>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Image:</label>
<input class="multi with-preview" type="file" name="image[]" multiple/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" id="submitConnecterDeposer">Ajouter</button>
</div>
</form>
This is $_files variable after submit one image file (with javascript enable):
This is $_files variable after submit one image file (with javascript disabled):
now its correct:
The question is if the problem is caused by JavaScript how can I detect which file or piece of code produces the wrong file upload?
JavaScript I use:
<script src="js/libraryJS/jquery.js" type="text/javascript" ></script>
<script src="js/signup-form.js" type="text/javascript" ></script>
<script src="js/nouveaumembreScript.js" type="text/javascript" ></script>
<script src="js/libraryJS/bootstrap.js" type="text/javascript" ></script>
<script src="js/enable-modal.js" type="text/javascript" ></script>
<script src="js/libraryJS/jquery.validate.js" type="text/javascript" ></script>
<script src="js/libraryJS/additional-methods.js" type="text/javascript" ></script>
<script src="js/libraryJS/jquery.MultiFile.js" type="text/javascript" ></script>
<script src="js/jquery.validate.script.js" type="text/javascript" ></script>
<script src="js/DejaInscritScript.js" type="text/javascript" ></script>
<script src="js/sec.js" type="text/javascript" ></script>
<script src="js/index.js" type="text/javascript" ></script>
<script src="js/connecterDeposerScript.js" type="text/javascript" ></script>
Some of scripts are libraries and for others I can't post all scripts.
I want to figure where is the problem.
I have a problem with the bootstrap datetime picker. I don't think the JavaScript get's loaded when the page is running. Here is the script that i try to run.
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'dk'
});
});
</script>
and here is the textbox/input box that I want the date picker to be related to.
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
I am using a masterpage if that is relevant for this problem. Can some one explained to me what I am doing wrong? Here is the generated HTML.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Euro Poultry
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="Content/bootstrap.css" rel="stylesheet" /><link href="Content/hover.css" rel="stylesheet" /><link href="Content/MenuCss.css" rel="stylesheet" /><link href="Content/MyCss.css" rel="stylesheet" /><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /><link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" /><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../Scripts/moment.min.js"></script>
<script src="../Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="../Scripts/da.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" /></head>
<body>
<form method="post" action="NewProduct" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="TohYngYAQpCAII8RpuQnEalPl/MTArnSEh+ZpM9u8IM0qp+pydvAXRs1biEQdGMzypAlutTdOoQBFlApZ5P0jplQl6tY3em/XaDxCPoZLIUpPnQP/EJu8oNhT1EGKGTU/mY5b/S/GvhXA3nzCXGnQ37DOu9qDZwMxP3xDCwjFxTwNQux/jF9ZH/K24q0Fmgo7cpJALpuVCgmiBZ8nxTPpA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax-framework på klientsiden blev ikke indlæst.');
//]]>
</script>
<script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E6B80599" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ziT0MWsXfU8bZf+HxgsyZxmvTOEWqLQAAVF2jCik7SvdOA/hstIfA8BYa8FfUczfqC2x1DvTsx1lx8eC0mAvo2idOZKBotnAxZyCCfL95qaIB3oeDzaq8WPooYr8Erpv" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl16', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="MenuBody">
<a href="Overview.aspx">
<div class="MenuBrand">
<p>EP</p>
</div>
</a>
<a href="AllProducts.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Produkter</p>
</div>
</a>
<a href="NewProduct.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Nyt Produkt</p>
</div>
</a>
</div>
<div class="menuUnderLine">
</div>
<div class="Content fullscreen">
<div class="newProductWrapper">
<div class="myRow">
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewGtin">GTIN - Global Trade Item Number</span>
</div>
</div>
<div class="myRow">
<div class="mediumCol">
<input name="ctl00$MainContent$txtNewGtin" type="text" id="MainContent_txtNewGtin" class="form-control" />
</div>
</div>
</div>
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewTargetMarket">Landekode for Target Market</span>
</div>
<div class="mediumCol">
<select name="ctl00$MainContent$ddNewTargetMarket" id="MainContent_ddNewTargetMarket" class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="myRow">
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_Label1">Start gyldighedsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewEffectiveDate'>
<input id="txtNewEffectiveDate" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_lblNewPublicationDate">Publikationsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input id="txtNewPublicationDate" data-format="dd/MM/yyyy" type='text' class="form-control" />
<span class="input-group-addon" style="z-index: 200;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#txtNewEffectiveDate').datetimepicker({
locale: 'da'
});
});
</script>
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'da'
});
});
</script>
</div>
</form>
</body>
</html>
I'm trying to use custom patterns in Foundation 5.
Here is my code
<head>
<meta charset="utf-8">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<form name="input" action="validate.php" method="post" data-abide>
<fieldset>
<legend>Todos os campos são necessários</legend>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Dogecoin Adress</label>
</div>
<div class="small-9 columns">
<input name="wallet" type="text" pattern="wallet" class="small-12 columns" required />
<small class="error">Invalid Adress</small>
</div>
</div>
</fieldset>
</form>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.abide.js"></script>
<script>
$(document).foundation(
{
abide:{
patterns:{
wallet: /^D[A-Za-z0-9]{33}$/
}
}
}
);
</script>
</body>
Why when I introduce a valid adress (ex: DRzKV3Vr235MTuGuVZ4eHjZfmy4TsymDX4) it still says I have an invalid adress?
I made the following changes:
I made sure to set the type to text/javascript (some browsers may need this).
I added the {1} following the first D character in the regex pattern.
Used an updated regex pattern that should make sure all of the address characters are valid for Base58 addresses.
Edit: Fixed HTML display
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vendor/modernizr.js"></script>
</head>
<body>
<form name="input" action="validate.php" method="post" data-abide>
<fieldset>
<legend>Todos os campos são necessários</legend>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Dogecoin Adress</label>
</div>
<div class="small-9 columns">
<input name="wallet" type="text" pattern="wallet" class="small-12 columns" required />
<small class="error">Invalid Adress</small>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.abide.js"></script>
<script type="text/javascript">
$(document).foundation(
{
abide:{
patterns:{
wallet: /^D{1}[5-9A-HJ-NP-U]{1}[1-9A-HJ-NP-Za-km-z]{32}$/
}
}
}
);
</script>
</body>
Or you could try the following approach using jQuery's extend method to set the pattern:
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vendor/modernizr.js"></script>
</head>
<body>
<form name="input" action="validate.php" method="post" data-abide>
<fieldset>
<legend>Todos os campos são necessários</legend>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Dogecoin Adress</label>
</div>
<div class="small-9 columns">
<input name="wallet" type="text" pattern="wallet" class="small-12 columns" required />
<small class="error">Invalid Adress</small>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.abide.js"></script>
<script type="text/javascript">
jQuery.extend(window.Foundation.libs.abide.settings.patterns, {
wallet: /^D{1}[5-9A-HJ-NP-U]{1}[1-9A-HJ-NP-Za-km-z]{32}$/
});
</script>
</body>