Form validation to work on safari browser too - php

I had a code written in my files to validate a login form that works for most browsers including safari but suddenly one week ago it stopped working for checkboxes. If i submit the form without choosing a service then it submits which shouldn't happen. Here is my code below, it would be great if anyone could point out why it stopped working. Thanks in advance!
<form method="post" action="includes/blah.php" name="GuestForm" id="GuestForm" autocomplete="off" onsubmit="return validate();">
<input name="services[]" type="checkbox" value="blah"> blah<br>
<input name="services[]" type="checkbox" value="blah2"> blah2<br>
<input name="services[]" type="checkbox" value="blah3"> blah3<br>
<input type="submit" class="submit" id="submit" value="Submit"><input type="reset" value="Reset"><br>
</form>
<script>
function validate(){
if(!document.getElementById('services[]').checked){
alert('Please choose a service');
return false;
}
return true;
}
</script>

<script>
function validate(){
var services = document.getElementsByName('services[]');
for(k=0; k < services.length; k++) {
if (services[k].checked) return true;
}
alert('Please choose a service');
return false;
}
</script>
edit for exact answer:
<script>
function validate(){
var services = document.getElementsByName('services[]');
var services_length = services.length;
if (services_length) {
var unchecked = true;
for(k=0; k < services_length; k++) {
if (services[k].checked) {
unchecked = false;
break;
}
}
if (unchecked) {
alert('Please choose a service');
return false;
}
}
return true;
}
</script>

Related

How to check any of text area,radio is checked jquery

I need to validate a form with jQuery. I can check whether my form is empty or not.In my form i can have input elements of different types: Textarea, Radio button etc
And i have save button
form can't submit with empty values.but if any one of textarea or anyone of check box is checked (not compulsory to check all values and fill all text area but form can't be empty)
Very new to jquery and its very complicated for me :( I tried
function checkValues() {
if ($.trim($(this).val()) == '') {
alert('not okay');
return false;
} else {
alert('okay');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" name="save" value="Open" onClick="checkValues()" class="btn btn-primary">Save</button>
Any help would be appreciated.
I suggest you use the form's submit event:
Here is testing empty - it will allow submission if ANYTHING is filled/checked/selected
$("#form1").on("submit", function(e) {
var empty = true;
$(":input").each(function() { // all types of form fields
if (this.type.indexOf("text") == 0 || this.type == "password") { // text, textarea and password
empty = $.trim(this.value) == "";
if (!empty) return false; // leave the each
} else if (this.type.indexOf("select") == 0) { // select-one/multiple
empty = this.value == "";
if (!empty) return false; // leave the each
} else if (this.type == "checkbox") {
empty = !this.checked
if (!empty) return false; // leave the each
}
});
// radios are a special case
if (empty) { // only bother testing if nothing is filled
var $radios = $("[type=radio]",this); // all radios in the form
if ($radios.length > 0) { // any radios?
empty = $("[type=radio]:checked", this).length==0; // any checked?
}
}
if (empty) {
console.log("All fields are empty")
e.preventDefault(); // cancels the submission
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="text" value="" /><br/>
<textarea></textarea><br/>
<label>OK? <input type="checkbox" value="OK"/></label><br/>
<label>Yes <input type="radio" name="rad" value="yes"/></label>
<label>No <input type="radio" name="rad" value="no"/><br/></label>
<select>
<option value="">Please select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<input type="submit" />
</form>
Alternatively try this, which is counting filled values instead
$("#form1").on("submit", function(e) {
var values = [],
val = "";
$(":input").each(function() { // all types of form fields
if (this.type.indexOf("text") == 0 || this.type == "password") { // text, textarea and password
val = $.trim(this.value);
if (val !== "") values.push(val);
} else if (this.type.indexOf("select") == 0) { // select-one/multiple
if (this.value !== "") values.push(this.value);
} else if (this.type == "checkbox") {
if (this.checked) values.push(this.value);
}
});
var $radios = $("[type=radio]", this); // all radios in the form
if ($radios.length > 0) { // any radios?
var $checked = $("[type=radio]:checked", this);
if ($checked.length > 0) { // any checked?
$checked.each(function() { values.push(this.value); })
}
}
if (values.length > 0) {
console.log(values);
e.preventDefault(); // cancels the submission
} else {
console.log("All fields are empty")
e.preventDefault(); // cancels the submission
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="text" value="" /><br/>
<textarea></textarea><br/>
<label>OK? <input type="checkbox" value="OK"/></label><br/>
<label>Yes <input type="radio" name="really" value="yes"/></label>
<label>No <input type="radio" name="really" value="no"/><br/></label>
<select>
<option value="">Please select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<label>Left <input type="radio" name="direction" value="left"/></label>
<label>Right <input type="radio" name="direction" value="right"/><br/></label>
<input type="submit" />
</form>
here is example how you can have checks for textarea, checkbox and textbox.
try this.
function checkValues() {
if ($("#textarea1").val()) {
console.log("text area has value")
} else {
console.log("text area doesn't have value")
}
if ($("#checkbox1").prop("checked")) {
console.log("chack box is checked")
} else {
console.log("chack box is not checked")
}
if ($("#text1").val()) {
console.log("text box has value")
} else {
console.log("text box doesn't have value")
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea1" cols=20 rows=10></textarea>
<br/>
<input type="checkbox" id="checkbox1" value="chk_val" /> check me
<br/>
<input type="text" id="text1" placeholder="enter something" />
<br/>
<button type="submit" name="save" value="Open" onClick="checkValues()" class="btn btn-primary">Save</button>
Get your textarea value val() function pass field's id (i have used as txt)
for radio button $('radio button id').is(':checked') will give you true or false.
Try with the following code if it helps
function checkValues()
{
var textarea = $('#txt').val();
var isChecked = $('#rdSelect').is(':checked');
if(textarea == "")
{
alert ("textarea required");
}
if(isChecked == "false")
{
alert ("radio button should be checked");
}
}

why the page is redirecting to the one in action attribute without completion of the form?

my javascript code is below:
<script>
function check(){
if(document.getElementById("1").value=="") {
alert("enter 1st value");
document.getElementById("1").focus();
return;
}
else if(document.getElementById("2").value=="") {
alert("enter 2nd value");
document.getElementById("2").focus();
return;
}
return(true);
}
</script>
my html page is
<form action="home.php" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="check()"></input>
</form>
when I left intentionally on of the input fields empty, it is focusing but immediately redirecting to home.php page without proceeding further for input value.
You return void in the check function. If you return false submitting of the form halts.
<script>
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false; // <<<< CHECK THIS LINE;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false; // <<<< CHECK THIS LINE
}
return(true);
}
</script>
// Edit
An input element is a so-called self-closing tag. Correct syntax is:
<input type="text" name="some_name" value="" />
And a submit button should be defined as:
<button type="submit">Button text</button>
You need to return false in order for the submit to get cancelled.
<form action="home.php" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="return check()"></input> <!--Notice the return here-->
</form>
function check()
{
if(document.getElementById("1").value=="")
{
alert("enter 1st value");
document.getElementById("1").focus();
return false;//return false instead of void
}
else if(document.getElementById("2").value=="")
{
alert("enter 2nd value");
document.getElementById("2").focus();
return false;//return false instead of void
}
return true;
}
JSFiddle
<form action="home.php" method="get" onSubmit="return check();">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"></input>
</form>
You are not checking for third field whether it is empty or not.... Then how will this be stopped if it is empty?
It goes with out getting tested
Also usage return false is needed in order to prevent the page from going on, because it tells the browser to reset such actions.
And then use return check() instead
Change to
<html>
<script type="text/javascript">
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false;
}
else if(document.getElementById("3").value==""){
alert("enter 3nd value");
document.getElementById("3").focus();
return false;
}
return(true);
}
</script>
<form action="home.php" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="return check()"></input>
</form>
You need to change your question like below
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false;
}
return(true);
}
if your function return false then it will prevent the form to be posted.
so inside the if condition returning false.
<html>
<head>
<script>
function check(){
if(document.getElementById("1").value==""){
alert("enter 1st value");
document.getElementById("1").focus();
return false;
}
else if(document.getElementById("2").value==""){
alert("enter 2nd value");
document.getElementById("2").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="test.html" method="get">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"onclick="return check()"></input>
</form>
</body>
</html>

Shift+Enter button used for submitting form

i want to submit a form using shift+enter button instead of pressing a simply Enter Button.
Pl help me out
If you still want to do this despite the usability problem that this poses...
$('#form').keydown(function(e) {
if( e.keyCode === 13 && e.shiftKey ) { // When "Shift + Enter"
$(this).trigger('submit');
} else { e.preventDefault(); }
});
I suggest use CTRL+ENTER to submit form。So that the user experience will be better。
<script language=javascript>
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}
}
</script>
<form action="http://www.TOMMYHU.CN" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>
Have you tried?
$(document).keydown(function(e) {
if(e.keyCode==13 && e.keyCode==16){ // 13=enter 16=shift
//submit here
alert('submit now');
}
else{
e.preventDefault();
}
});
Improving on zhaixiaohu's idea:
<form action="." method="POST">
<textarea name="text"></textarea><br />
<button>Submit</button>
</form>
<script>
var textareas = document.getElementsByTagName("TEXTAREA");
for (var i = 0; i < textareas.length; ++i) {
textareas[i].addEventListener('keydown', function(ev) {
if(ev.ctrlKey && ev.keyCode === 13){
this.form.submit();
}
});
}
</script>
This…
is pure Javascript
attachs itself to all textareas, and submits the correct form
works only in modern browsers, but might be extended to work with more browsers

target="_blank" functionality from within iframe to my chat

my link chat : http://www.mzzzik.com/chat/
File js
window.onload = function() {
// only needed becouse of a bug in ie8 rc1, there is no BG-image without any div manipilation by js
Element.show('lay_pw');
Element.hide('lay_pw');
//-------------------------------------------
$("login").onsubmit = function(){
if (!Element.visible('lay_pw')) $('pw').value='';
$('submit_button').disabled = true;
var myAjaxObj= new Ajax.Request(
"./?CheckUserName",
{
onSuccess: function(ajaxResult) {
if (ajaxResult.responseText==1) location.href='./?Chat';
else{
$('submit_button').disabled = false;
if (ajaxResult.responseText=='pw' || ajaxResult.responseText=='pw+invisible') {
Element.show('lay_pw');
if (ajaxResult.responseText=='pw+invisible') Element.show('lay_invisible');
Element.hide('lay_gender');
$("pw").focus();
} else {
if (ajaxResult.responseText=='blacklist') location.href="./?AfterBlacklistInsertion";
else if(!ajaxResult.responseText.empty()) alert(ajaxResult.responseText);
else {
$('username').value='';
$('username').focus();
$('coloruser').value='';
$('coloruser').focus();
}
}
}
},
postBody: $("login").serialize()
}
);
return false;
}
}
On this Page
<form id="login" action="">
<input type="hidden" name="4f4940ef9f9874b3066833f786f06b2c" value="1327851439" />
<input type="text" name="username" id="username" value="" maxlength="100" />
<input type="submit" id="submit_button" name="go" value="enter" />
</form>
When try put
<form id="login" action="" target="_blank">
show link
http://www.mzzzik.com/vb/chat/?56f130145f599f85cb0ebefe5e=13288799&username=&pw=&gender=35&go=%D8%A7%D8%B6%D8%BA%D8%B7+%D9%87%D9%86%D8%A7+%D9%84%D9%84%D8%AF%D8%AE%D9%88%D9%84!
and This shows the message
Fatal error: Class '56f130145f599f85afe1d1cb0ebefe5e' not found in /home/abdooo/public_html/vb/chat/index.php on line 28
Be a link like this
http://www.mzzzik.com/chat/?Chat
How can be accessed directly without problems from within iframe
and can make Auto submit form after 5 seconds in chat
<script type="text/javascript">
window.onload=function(){
window.setTimeout('document.login.submit()', 500)
}
</script>
Use Version
ET - Chat v3.x
http://www.sedesign.de/de_produkte_chat-v3.html
Waiting for solutions
Thank you

how to see a checkbox is not checked

I want to alert user if they haven't checked any checkbox, and return to the form
After they checked at least one checkbox, proceed into the next page
How can I do that ?
<input type="checkbox" name="pay[]" value="
<?php
echo $DateArr[$record_count].";";
echo $invoiceArr[$record_count].";";
echo $TotalArr[$record_count].";";
echo $amount_dueArr[$record_count];
?>
" onClick="checkTotal()"/>
<td ALIGN="right" ><input type="submit" name="submit" value="Continue" onMouseOver="CheckBoxStatus()"></td>
javascript :
function CheckBoxStatus()
{
var checkbox_status = document.getElementsByName("pay[]").value;
if (checkbox_status = ";;;")
{
alert("Please select at least one to proceed!");
return false;
}
else
{
alert("Continue!");
return true;
}
}
If user hasn't checked, at least one checkbox, alert the message and return to form
Then
<form name="payform" method="POST" action="payment.php" onSubmit=" CheckBoxStatus()">
How can I stay in the form if user is not checking any checkboxes ?
May be like this :
function CheckBoxStatus()
{
if (document.getElementsByName("pay[]").checked == true)
{
document.forms["payform"].submit();
return true;
}
else
{
alert("Please select at least one invoice to proceed!");
document.forms["payform"].reset();
return false;
}
}
can i do like this :
`
function CheckBoxStatus()
{
var status=$("pay[]").attr('checked');
if (status=true)
{
//if(document.getElementsByName("pay[]").checked) {
return true;
}
else {
alert("Please select at least one to proceed!");
return false;
}
}`
With jQuery
var $checked = $("input:checked");
if($checked.length == 0) {
alert("Please select at least one to proceed!");
}
That HTML is a bit of a mess. A couple of things...
Get rid of the <td> tag containing the button. It doesn't look like it has a purpose.
To call the JavaScript you need to use onsubmit not onMouseOver.
To check if the checkbox is checked change your function to the following.
function checkBoxStatus {
if(document.getElementsByName("pay[]").checked) {
return true;
}
else {
alert("Please select at least one to proceed!");
return false;
}
}
EDIT; forgot the alert
Check if you have included jquery. :|
Try this:
<input id="ipay" type="checkbox" name="pay[]" value="
<?php
echo $DateArr[$record_count].";";
echo $invoiceArr[$record_count].";";
echo $TotalArr[$record_count].";";
echo $amount_dueArr[$record_count];
?>"
/>
<td ALIGN="right" ><input type="submit" name="submit" value="Continue"></td>
<form id="pform" name="payform" method="POST" action="payment.php">
Javascript:
$(document).ready(function() {
$('#pform').submit(function(e) {
var paycheck = $('#ipay').attr('checked');
if(paycheck != true or paycheck != 'checked') {
alert('Please check at least one option.');
e.preventDefault();
}
});
});
You can do something like this:
<html>
<head>
<title>Verify Checkbox</title>
<script type="text/javascript">
function verifyCheckboxSelected(form) {
var theForm = document.forms[form];
var valid = false;
for( var i=0; i < theForm.length; i++ ) {
if(theForm.elements[i].checked) {
valid = true;
}
}
if (!valid) {
alert('You must select at least one checkbox')
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onSubmit="return verifyCheckboxSelected(this.name)">
<input type="checkbox" name="myCheckBoxes[]"/>Checkbox A</br>
<input type="checkbox" name="myCheckBoxes[]"/>Checkbox B</br>
<input type="checkbox" name="myCheckBoxes[]"/>Checkbox C</br>
<input type="submit" value="submit" />
</form>
</body>
</html>

Categories