I am trying to validate a bootstrap form with jQuery.
var formSubmit = $("#dl-mg-form-publish").validate({
rules: {
'dl-mg-input-youtube': {
required: true,
url:true,
},
'dl-mg-input-title': {
required: true,
minlength: 6 });
I am trying to validate this:
var videoInformation = {
youtubeID: $('#dl-mg-input-youtube').val(),
title: $('#dl-mg-input-title').val(), }
This is my html:
<form class="form-horizontal dl-mg-form-horizontal" id="dl-mg-form-publish" action="#">
<div class="form-group">
<label for="dl-mg-input-youtube" class="control-label col-xs-2">YouTube Video ID:</label>
<div class="col-xs-6">
<input type="url" class="form-control" id="dl-mg-input-youtube" name="dl-mg-input-youtube" placeholder="Youtube ID">
</div>
</div>
<div class="form-group">
<label for="dl-mg-input-title" class="control-label col-xs-2">Video Title:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="dl-mg-input-title" name="dl-mg-input-title" placeholder="Video Title">
</div>
</div>
I am new at programming I don't know how to validate first and then submit. I tried using a .click handler but it submits the fields with errors anyway. Please help!
Before submitting your form you need to validate the form. You can do this inside the click event like:
$("#target").click(function () {
// Validate the form first
if (!$("#dl-mg-form-publish").valid()) return false;
// Your form is valid, so continue with you submit logic..
});
More info here: .valid()
EDIT:
Disable auto validation on keypress
Use this options for the validate() method:
$("#dl-mg-form-publish").validate({
onfocusout: false,
onkeyup: false,
// other options here
})
Related
I have a simple input params that are required. I want to disable my submit button until all the required fields are satisfied. Granted I am new to django, and the particular code I am working on is very old. As a result, post like this or this are not helping.
Current code that I am trying from one of the posts linked and including my own template
<script type="text/javascript">
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
$('#submit').on('click', function() {
var zip = $('#zip').val();
var email = $('#email').val();
var name = $('#name').val();
//if inputs are valid, take inputs and do something
});
<form class="form-horizontal" action="" method="get" id="dataform">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-3">
<input class="col-md-12" id="zip" type="text" placeholder="Enter zip code" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="name" type="text" placeholder="Enter last name" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="email" type="email" placeholder="Enter email address" aria-required="true">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="btn btn-primary" id="submit" type="submit">Submit</div>
</div>
</div>
</form>
any help on disabling my submit button until input fields are not validated/filled is much appreciated. Again, new to django and I am unable to use existing threads on said topic
From your current code, looks like your selector for the submit input is not actually getting the submit "button". Currently, your template defines the submit as a div and not an input, thus your selectors should be $("div[type=submit]") not $("input[type=submit]")
Better yet, just select by div id $('#submit')
Instead of targeting attributes, I was targeting props. Below is the fix for my particular issue.
if (inputsWithValues === 3) {
$("div[type=submit]").attr("disabled", false);
} else {
$("div[type=submit]").attr("disabled", 'disabled');
}
I am currently using jQuery validation plugin to validate my form field. When a user did not enter any value on the field, an error label will be displayed, stating that "this field is required". However, the error label is displayed all the way at the left side of the browser which seems odd. Here is a screenshot of my problem, the desired outcome and my codes
Error screenshot
Desired outcome
<script>
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function (element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function (element) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
}
});
$('#dataForm').validate({
rules: {
accountNameInput: {
required: true
}
}
});
</script>
<form id="dataForm" role="form" class="form-horizontal">
<div class="form-group col-md-12">
<label class="control-label col-md-4" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" class="form-control font-bold"
maxlength="100" placeholder="Account name" value="" />
</div>
</form>
I am trying to have my all my text/email input forms have a required attribute before you can "Submit" The email
But since I am using some Ajax to keep the page from refreshing after pressing the button the required attribute will not work.
This is why I am asking for an alternative for required with Javascript or jQuery (trying to prevent email form spam).
HTML (FORM)
<form id="contact">
<div class="form-group">
<label for="name">Voornaam*</label>
<input name="fn" type="text" class="form-control" id="fn" required>
</div>
<div class="form-group">
<label for="name">Achternaam*</label>
<input name="ln" type="text" class="form-control" id="ln" required>
</div>
<div class="form-group">
<label for="email">Email-address*</label>
<input name="email" type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="message">Bericht*</label>
<textarea name="message" required class="form-control" id="message" rows="6"></textarea>
</div>
<button type="button" onClick="doIets(); this.form.reset();"
name="submit" id="submit" class="btn btn-primary">Verstuur <span id="result"></span></button>
<div id="result2"></div>
</form>
Ajax script
<script type="text/javascript">
function doIets()
{
console.log("doe iets");
var data = {
ck: (new Date()).getTime(),
fn: $("#fn").val(),
ln: $("#ln").val(),
email: $("#email").val(),
message: $("#message").val()
};
$.ajax({
type: "POST",
url: "sendmail.php",/*php file path*/
data: data,
beforeSend: function(){
$('#result').html('<img src="loader" style="height:10px;"/>')
},
success: function(data){
$('#result').hide();
$('#result2').html(data);
}
});
}
</script>
You will need to use e.preventDefault() when they click on the submit button and then validate the form and after that submit it using the ajax call you created above.
since you already read out the data, you can check whether your message is long enough for you via
data.message.length
if it is 0 (or lower than a threshold you defined), you can skip the ajax call and return some info to the user.
You might also want to trim the message first in order to be sure there aren't only whitespace in there.
Here is part from my code, where I bind the submit event to my form and check by looping if any required field is empty or if I want to do any such thing.
This way may help you--
$('.form .contact-form').submit(function(e) {
e.preventDefault();
$('.form .message').eq(0).html("<i>Sending... Please Wait...</i>");
var form = $(this);
var validated = true;
$('input[type="text"]',this).each(function(){
if($(this).val().length < 1){
$(this).addClass('error').focus();
validated = false;
return false;
}
});
if(validated === true){
$.post(__asyn.ajaxurl, $('.form form').eq(0).serialize(), function(data, textStatus, xhr) {
console.log(data);
});
}
});
Just pass the event object to your handler onClick="doIets(event);
and then add
function doIets(event) {
event.preventDefault();
...
}
I am using form validator plugin to validate my forms.
It is working properly if I am not submitting data using jQuery post method.
On using jQuery post it is not validating the form on submit.
My code is
<form action="UpdatedProfile" method="post" name="updateprofile" id="UpdatedProfile" class="form-horizontal">
<div class=" form-group ">
<div class="col-lg-2">
<label>First Name</label>
</div>
<div class="col-lg-4">
<input type="text" name="fname" cssClass="form-control" data-validation="required" data-validation-error-msg="First Name is required"/>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$.validate();
$(document).on('click', '#submit', function (event) {
event.preventDefault();
console.log($('#UpdatedBasicProfile').serialize());
$.post("Updated", $('#UpdatedProfile').serialize(), function (data)
{....});
});
});
</script>
How to achieve this?
put a submit button in the form and define validation rule in js like
$('#frm_registration').validate({
rules:
{
fname: required
},
messages:
{
fname : 'Please enter name'
}
});
or if the button is of type button then initiate validation on its click like:
$('#btn').click(function(){
$('#frm_registration').valid(); // will initiate the validation
})
If the validator is working when clicked on submit button, you could trigger a click event on the button rather then listening the document for any clicks and if the target is the given button.
I have the following jquery code
$().ready(function){
$("#Form").validate({
rules:{
DL:{
minlength:2
}
}
});
}
message:{
DL:{
minlength:"DL should be of at least 5";
}
}
The validation required is that the field DL should have length of 5.
The html code is below
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input
type="text" class="form-control" id="DL" required>
</div>
But the page does not seem to validate, after clicking a button, instead of showing message the page just scrolls upwards.
Here is your solution
https://jsfiddle.net/geradrum/far1fj1n/
All the code have syntax errors.
And the $() should be $(document)
The main problem is that the rules object looks for the element's name and you were using the id of the element.
index.html
<form id="FORM">
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input type="text" class="form-control" name="DL" required>
</div>
<input type="submit" value="Validate!">
</form>
app.js
$(document).ready(function(){
$( "#FORM" ).validate({
rules: {
DL: {
required: true,
minlength: 5
}
},
messages: {
DL: "DL should be of at least 5"
}
});
});