I'm using this tutorial to try and make a form http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
My form works great but I have included 3 tick boxes that I want the user to tick before they can submit. Creating this validation has had me scratching my head all day!
I've tried making these custom fields but am pretty sure my syntax is wrong. I am well out of my depth here! The tutorial provides example that I tried to implement but the coding is too different for me to use on my form. This is what I tried:
<input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox" value='<?php echo $formproc->SafeDisplay('email') ?>'</label><label for='Please tick the box before pressing submit' >
And then after the form, inside the script adding:
frmvalidator.addValidation("checkbox1","checkbox1","Please tick the box before pressing submit");
The form still submits but my validation doesn't happen. If anyone can point me in the right direction, that would be really incredible.
I'm not sure if it's the done thing to post the actual page I'm working on as it's my clients website?
It's in the documentation.
frmvalidator.addValidation("checkbox1","shouldselchk=on");
First you need to give value to your checkbox as below
<input type="checkbox" name="checkbox1" id="checkbox1" value="1"/>
Then, you need to pass type of validation in second argument of addValidation function as below
frmvalidator.addValidation("checkbox1","shouldselchk=1");
Related
I am using a Contact Form 7 form in Wordpress. I have a group of checkboxes, of which I would like to make sure at least one is checked before the form is submitted. Should be simple enough... With the built in validation, because I am not using the CF7 short code, but html input markup, even if the fields are set to required, the form submits. I cannot use the short code because my input field names contain [] brackets. So, I installed Jquery validation plugin for CF7, which works fine to disallow the form to be submitted if none of the boxes are checked, but if you check, say, the first 3 boxes, only the values of the second and third boxes are sent through the form. I have looked around at several custom validation code snippets which look like they would work and I paste them into the same area as I have other similar snippets doing other things and they don't make a difference because the built in CF7 validation doesn't stop the form from submitting when the required fields of my html input fields aren't checked. Any suggestions? I am not a coder (doing my best though) so please feel free to answer like I am a child lol. Here is my html:
<p>
<label>Which Are You Most Interested In?</label>
</br>
<label for="cb1">
<input id="cb1" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="bf2fd8233f" required> <span>Interest 1</span>
</label>
</br>
<label for="cb2">
<input id="cb2" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="c1b1b74e7c" required> <span>Interest 2</span>
</label>
</br>
<label for="cb3">
<input id="cb3" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="a4c5eb6f36" required> <span>Interest 3</span>
</label>
</br>
<label for="cb4">
<input id="cb4" name="mc4wp-INTERESTS[de9f89w3vq][]"
type="checkbox" value="587de639d6" required> <span>Interest 4</span>
</label>
</p>
--
I figured the best way for me to go about this is to just disable the submit button until the group of checkboxes has had at least one value checked (and another set of radio buttons having had one checked) and found this code:
(function($) {
function buttonState(){
$("input").each(function(){
$('#send-info').attr('disabled', 'disabled');
if($(this).val() == "" ) return false;
$('#send-info').attr('disabled', '');
})
}
$(function(){
$('#send-info').attr('disabled', 'disabled');
$('input').change(buttonState);
})
})(jQuery);
... Which works really nicely to disable the submit button, however it seems like since I have hidden fields it does not re-enable the submit button. Also not sure if it cares about required fields only. Wondering how to modify it so that it only cares about required fields and ignores hidden fields. I tried several other snippet solutions and for some reason they were not disabling the submit button. I have the script installed at the bottom of the page via Scripts and Styles Wordpress plugin.
For the input type text, if i add required attribute, my form won't submit and browser will focus on required field and alert will say please fill this field.
For the input type radio, if i add required attibute, my form won't submit but also it does not provide me any alert or focus on the radio which is unchecked.
If this is not an in-built functionality for HTML5, can i in some way create it and make it look like the same as it looks for text inputs so that style integrity is also preserved?
This code works well, if you not select radio, form will not submit. If you select one and enter text in textbox, form will submit.
<form>
<input type="radio" name="one" value="1" required>
<input type="radio" name="one" value="2" required>
<input type="radio" name="one" value="3" required>
<input type="text" name="two" required>
<button>Submit</button>
<form>
Checked on latest version of Google Chrome. May be you found a bug in your browser, try to update it.
Beside required radio button alerts work "perfectly fine" in Chrome...
jsBin demo
it makes no sense at all to have an alert for a radio button, that's silly.
If you have a radio button:
there's absolutely no need to have only one radio button. → Use checkboxes.
there's absolutely no reason to have all radio buttons unchecked initially.
one must be checked by default - and it's your job to do so
logically there's no need to popup alerts like "This radio button is required" - therefore neither to set a required attribute to a radio button.
if you still don't understand why... well simple because radios are used as UI switch states. Only one can and must be checked. If you make them all initially unchecked - and a client unintentionally hits a radio - he's dead in the devil's loop, because once you enter the circle there's no way out. Therefore makes no sense to have all blanks in the first place. You cannot undo... (well, unless you have another silly checkbox or something that says "uncheck all radio buttons!" nonsense).
I am an absolute begginer to web developing and I want to simply do a chance calculator in the online tool: jsfiddle. I got the error:"Shell form does not validate" and some strange errors after. Here is my HTML code:
<body>
<form method="post">The chance of succes:
<input type="number" name="chance">
<br>How many tries:
<input type="number" name="tries">
<br>
<input type="submit" value="Calculate!">
<br>
</form>
</body>
And my javascript code is:
function calculate(chance, tries) {
console.log(chance / tries * 100);
}
As I said, I am new to this so please try to explain step by step.
You have a few problems. One is that your form is trying to submit itself to itself. Another is that your calculate function is never called.
Your parameters for the function are never called either. Let's change the inputs to have an id instead of a name. For example:
<input type="number" id="chance">
This makes it easier to get the value from the input when clicking the button. I've made the input a button instead of a submit, just to make sure that your form data isn't getting sent anywhere.
<input type="button" onclick="return calculate(getElementById('chance').value, getElementById('tries').value)" value="Calculate!">
Here is a jsfiddle with a possible solution for you. http://jsfiddle.net/0dmkxcab/
I'm using Twitter's bootstrap and need to pass a delimited list of checkbox selections to my server for processing. The checkbox HTML looks like this:
<div class="controls">
<label class="checkbox"><input type="checkbox" name="my_match[]" value="190">TEST 190</label>
<label class="checkbox"><input type="checkbox" name="my_match[]" value="200">TEST 200</label>
<label class="checkbox"><input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>
...
$.post("form.php", $("#form_id").serialize(), function(){
...
});
I'm passing the form values as a serialized string using jquery but the values are being sent like so:
my_match=190&my_match=200
Is it possible to send them in the following format?
my_match=190:200
I'm not sure if I need to change my HTML or this is something I need to handle with javascript. Any thoughts?
Something like this would do the trick:
<div class='controls'>
<label class="checkbox">
<input type="checkbox" name="my_match[]" value="190">TEST 190</label>
<label class="checkbox">
<input type="checkbox" name="my_match[]" value="200">TEST 200</label>
<label class="checkbox">
<input type="checkbox" name="my_match[]" value="210">TEST 210</label>
</div>
<form>
<input id='my_match' type='hidden' name='my_match[]' />
<button>Submit</button>
</form>
$('form').submit(function() {
var arr=[];
$('input:checked[name=my_match[]]').each(function(){
arr.push($(this).val());
});
$('#my_match').val(arr.join(':'));
alert($('#my_match').val());
// Prevent actual submit for demo purposes:
return false;
});
Try out the fiddle
Edit: This is basically exactly what Chase described in his answer.
I believe checkboxes with the same name return back with a comma separated list. What you could do is create a hidden field, append your checked checkbox values the way you want and then send the hidden field instead.
For anyone else who gets brought here by Google:
To the best of my knowledge, JavaScript is the only way to make them a string with separators because it gets complicated if you want a general solution which can deal with all possible desired separators and support the escaping the separator if it shows up in one of the value strings.
If at all possible, I strongly recommend just accepting the my_match=190&my_match=200 format and converting them on the server.
In PHP, that's automatic if you put the [] at the end of the name. In other languages, such as Python, there will usually be a special getter which returns a list rather than a single value. (For example, request.POST.getlist('my_match') in Django)
Relying on JavaScript makes your page more fragile since a flaky connection, a network hiccup, or a broken application-layer firewall could prevent the JavaScript from loading or delay it long enough for the user to try clicking Submit without it.
(And, if you disable the submit button until the JavaScript has loaded, you'll just annoy and/or frustrate your visitors and give them the impression that your site is shoddily built because everyone else does just fine without that restriction. Always keep in mind how your actions affect the first impression you make.)
...not to mention, depending on JavaScript when you don't strictly need to (eg. dropdown menus without a :hover fallback, forms that frivolously require JavaScript to submit, etc.) annoys people like me who use JavaScript whitelisting tools like NoScript to:
Make web advertising and "take a survey!" interstitials less annoying
Reduce the sluggishness of having tons of tabs and extensions open
Limit the chances that a 0-day exploit will succeed
If you absolutely must use JavaScript in a situation like this, be sure to use a <noscript> tag to warn people to reload with JavaScript enabled before they fill out the form.
this is my first post on stackoverflow, I hope you can help me out!
I need to have javascript/ajax validation for a checkbox on a form I am making,
the checkbox is deselected by default but when it is ticked, a javascript box should pop up displaying this text,
"You have selected the newsletter checkbox, are you sure you would like to receive our newsletter?"
when they click the submit button.
If they click yes, the the form should submit the newsletter checkbox info, if not, the form should still submit, but without the newsletter checkbox info.
I would really appreciate the help, thank you.
Welcome to SO!
You will need a Javascript function that runs when your form is submitted. From there, you will check if the box is checked, if so, use confirm() to show your message. If they select no, then you uncheck the box via Javascript and your form submits as usual.
Pseudo code:
<script language="javascript">
function checkNewsLetter()
{
var chk = document.getElementById('chk1');
if ((chk.checked) && (!confirm('Are you sure you wish to sign up?')))
chk.checked = false;
}
</script>
<form onsubmit="return checkNewsLetter();">
<input type="checkbox" id="chk1" name="chk1" />
<input type="submit" />
</form>
I would also recommend checking out jQuery for all your Javascript needs, it's very easy to use.