I am using parsley.js for form validation. I read through the documentation on the website and followed their examples, but it does not seem to work as expected.
Here's the test file I created:
<doctype>
<html>
<head>
<title>Parsley</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="parsley.js"></script>
<link rel="stylesheet" href="parsley.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2>Parsley.js Form Validation</h2>
<form id="testForm" data-parsley-validate>
<label>Name</label><br />
<input type="text" name="name" data-required="true">
<br /><br />
<input type="submit" value="Submit" class="btn btn-success">
</form>
</div>
</div>
</div>
</body>
</html>
Any suggestions on what's going wrong?
You'll need to use data-parsley-required or directly required in your DOM.
Here are all the built-in validators: http://parsleyjs.org/doc/index.html#validators
Best
javascript file import should be in following order.
JQuery.js
Parsley.js
Common.js
<script type="text/javascript" th:src="#{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="#{/js/parsley.min.js}"></script>
<script type="text/javascript" th:src="#{/js/common.js}"></script>
If it's not like this, some component can't be known and it'll not working.I know it is a bit late, but I hope it can help someone.
Related
I took a bootstrap and jQuery datepicker online since it was easier for me, it worked perfectly on localhost, but now after uploading it online, it doesn't work, I click on the input, and usually a calendar would pop up, now I just have a plain text input.
This is the full file where I use the datepicker:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="css/reservation.css" rel="stylesheet">
</head>
<body>
<section class="book-a-table">
<h1 class="title">Book</h1>
<form action="choose-time.php" class="contact-form row">
<div class="form-field col-lg-6">
<input id="name" class="input-text js-input" name="name" type="text" required>
<label class="label" for="name">Ime</label>
</div>
<div class="form-field col-lg-6 ">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<input type='text'class="form-control input-text js-input" id="date" name="date"/>
</span>
<input class="submit-btn" name="submit" type="submit" value="Choose time >">
</form>
</section>
I had some script for disabling dates, I removed it but I still had no changes, tried to modify it, no changes, I only get a blank input text form.
It might be blocked by your server since it violates the Content Security Policy directive.
Check whether it shows in Browser Console (Ctrl + Shift + i).
Best way is to download Bootstrap files (e.g. https://getbootstrap.com/docs/4.3/getting-started/download/), upload it to your server and add this in your html
<link rel="stylesheet" href="./css/bootstrap.min.css">
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style_index.css">
<script src="js/testjs.js" charset="utf-8"></script>
<script src="js/sweetalert2.all.min.js"></script>
</head>
...
<body>
<div class="search">
<input type="text" id="search" name="search" required>
<button name="button" onclick="swal('Hi!')">Search1</button>
<button name="button2" onclick="alert('hi2')">Search2</button>
</div>
...
this is my code.
Search2 button works well, but Search1 button doesn't.
When I click this button, page has a lack and not work in IE11.
but in chrome it has no problem... I can't figure out why it does...
plz help me.
Sweetalert2 uses Promises but promises are not implemented by IE11. You have to include a polyfill (it's written in the docs). If you don't include the polyfill, you will have an error in the developer console logs (F12) "Promise" is undefined.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.26.12/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
</head>
<body>
<div class="search">
<input type="text" id="search" name="search" required>
<button name="button" onclick="swal('Hi!')">Search1</button>
<button name="button2" onclick="alert('hi2')">Search2</button>
</div>
</body>
</html>
I've come back to web development after a lengthly lay off, I'm using bootstrap and creating a simple contact form. If there is an error with validation I want to add a couple of classes to make the form element turn red and put the little cross in the input.
I've used the examples from the bootstrap site and I get it to work fine. As soon as I put the content into a form the addClass doesn't stick. The input flashes red and goes back to the grey border. I've stripped back my whole html to check it isn't anything else I've done and have narrowed the error down to the tags.
Any help greatly appreciated. PS my first post on here, apologies if I've missed anything
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
#emailError{
display: none;
}
</style>
</head>
<body>
<div class="container">
<form>
<div id="emailDiv" class="form-group">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control" id="email">
<div class="form-control-feedback" id="emailError">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-element">
<input type="submit" value="Sign Up" id="submitBtn">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#submitBtn").click(function(){
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
});
</script>
</body>
</html>
Like #AlonEitan said, you need to disable the default action of the form, which is to submit the form and that will reload the page. You can disable the action with e.preventDefault() or return false. You can disable it conditionally if you find errors, or you can disable it by default, then manually submit once the form is validated. Here's an example.
$("#submitBtn").click(function(e){
e.preventDefault();
if (there are errors) {
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
} else {
$('#formId').submit();
}
});
I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Ok so I have a jquery tag plugin which works perfectly, but then I thought ho!, it would be cool to add a "placeholder"to my text box. I did so... and nothing appeared apart from the jquery plugin... My place holder should be "hello type here"... I guess it doesn't work, because of the plugin, which is between "script" tags... I would be very thankful if someone could help me:)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm" action="searchlevel.html" method="post">
<p id="text">Sport:</p>
<input type="text" name="query" id="box" placeholder="hello type here! ">
<input type="submit" value="Submit" id="but">
</form>
</body>
<script>
//this is jquery tag plugin...
$(document).ready(function () {
$("#box").tagit();
});
// I guess I have to add something here to display the "placeholder", please help.
</script>
</html>
Aloha to you mate!
why are you using tagit javascript and css for placeholder. delete that scripts and use it simple it will work , but remember its only create problem when you will it in IE <9
look at here may help you
JSFiddleTest here