Junior Dev here. I'm trying to implement the following code in order to get all the info typed in the form and to receive an alert message ("everything is ok").
I know there is Jquery valid() function, but I have struggle with implementing it as well.So if it's possible when the textbox doesn't meet the requirements to post the error message(email needs "#", website needs "www.", name 6 letters, password="****".
Can anyone explain me with simple code how can I achieve this ?
<form id=registration_form action="" method="post">
<table>
<tr>
<td>Chose Username: </td>
<td>
<input type="text" class="form_text" id="form_username">
</td>
<td>
<span class="error_form" id="username_error_message"></span>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" class="form_text" id="form_password">
</td>
<td>
<span class="error_form" id="password_error_message"></span>
</td>
</tr>
<tr>
<td>Retype Password: </td>
<td>
<input type="password" class="form_text" id="form_retype_password">
</td>
<td>
<span class="error_form" id="retype_password_error_message"></span>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input type="text" class="form_text" id="form_email">
</td>
<td>
<span class="error_form" id="email_error_message"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="sbmt_btn" value="Create Account">
</td>
<td></td>
</tr>
</table>
</form>
Here is an example using the jQuery Validation Plugin. Its as simple as calling .validate(); on your form
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$("#commentForm").validate();
</script>
</head>
It covers email, required input validation and much more. Check out the docs here.
Also, using the submitHandler option for the plugin you can set a callback on submit if all fields are correctly validated. In the example below we use this to call alert() with the message 'Everythings Ok'.
Example
$(document).ready(function() {
$("#commentForm").validate({
//we can use the handler to check if form is correctly validated
submitHandler: function(form) {
alert('Everythings Ok');
}
});
});
input[class="error"], textarea[class="error"] {
border: 1px solid #f00 !important;
}
.error{
margin: 5px;
color: #f00 !important;
}
/* To cover your additional requirement mentioned in the comments */
body {
background: lightblue url(http://images.all-free-download.com/images/graphiclarge/winter_background_311052.jpg) no-repeat fixed center;
}
/* For your additional requirement */
form {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
Doing this with jQuery would require a lot of different validation techniques most likely including other libraries like Regex. The plugin aggregates all of them into one plugin that can be reused across multiple pages.
Related
i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit
OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)
Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>
please help...
when i use the code below used in the form it does not open the form at all in the lightbox / fancybox. but when i remove it it works.
Code:
<script type="text/javascript">
Recaptcha.create("6Ld5necSAAAAAMNoodwSDBwEWAQi3Yd3VHHSsZnr",
"recaptcha",
{
theme: "red",
callback: Recaptcha.focus_response_field
}
);
</script>
Button is like this:
<li class="email gradient_button">Email to a Friend</li>
and the form is like this:
<form name="email_friend" method="post" class="ajax_form">
<table>
<tr><td>Name: </td> <td> <input type="text" name="name"></td></tr>
<tr><td>Email: </td> <td> <input type="text" name="email"></td></tr>
<tr><td>Friends Email: </td> <td> <input type="text" name="friends_email"></td></tr>
<tr><td colspan="2">Message:<br>
<textarea name="message" class="fancybox_textarea"></textarea></td></tr>
<tr><td colspan='2'><br><div id='recaptcha'></div></td></tr> <tr><td colspan="2"><input type="submit" value="Submit" class="pull-left"></td></tr>
</table>
</form>
The full file of form looks like this:
<h3>Email to a Friend</h3>
<form name="email_friend" method="post" class="ajax_form">
<table>
<tr><td>Name: </td> <td> <input type="text" name="name"></td></tr>
<tr><td>Email: </td> <td> <input type="text" name="email"></td></tr>
<tr><td>Friends Email: </td> <td> <input type="text" name="friends_email"></td></tr>
<tr><td colspan="2">Message:<br>
<textarea name="message" class="fancybox_textarea"></textarea></td></tr>
<tr><td colspan='2'><br><div id='recaptcha'></div></td></tr> <tr><td colspan="2"><input type="submit" value="Submit" class="pull-left"></td></tr>
</table>
</form>
<script type="text/javascript">
Recaptcha.create("6Ld5necSAAAAAMNoodwSDBwEWAQi3Yd3VHHSsZnr",
"recaptcha",
{
theme: "red",
callback: Recaptcha.focus_response_field
}
);
</script>
when i remove the javascript part it opens the form in lightbox / fancybox but with this code it does not open anything.
can you please tell me the issue???
I am a beginner in web design and i created a simple web application to just collect some information and i want it to send the inputted data to a server to store it for me. I really need a simple code to input within my code to send it to the server and save it.
<style>
#Home { background-color:whitesmoke;}
#Site_Details { background-color:snow;}
#Dredger_Details { background-color:ghostwhite;}
img { width:800px;
height:500px
}
</style>
<style type="text/css">
td, th { border: 1px solid #CCC; }
table {border: 1px solid black; }
</style>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
<!-- Start of first page: #Home -->
<div data-role="page" id="Home">
<div data-role="header" data-theme="a">
<h1><strong><font size="5">WELCOME</font></strong></h1>
</div>
<!-- /header -->
<p><font size="30"><strong>Welcome.</strong></font></p>
<img src="img/Image31.jpg" /><br />
<p>Please click here to continue.</p>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="5">WELCOME</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of Second page: #Site_Details -->
<div data-role="page" id="Site_Details">
<div data-role="header" data-theme="a">
<h1><strong><font size="3">SITE AND DREDGER'S NAME AND TARGET.</font></strong></h1>
</div>
<!-- /header -->
<div style="color:blue">
<p><font size="5">Please fill in the following details.</font></p>
</div>
<form>
<label for="textinput-s"><font size="6"><strong>Site:</strong></font></label>
<input name="textinput-s" id="textinput-s" placeholder="SIte..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<label for="textinput-s"><font size="6"><strong>Dredger Name:</strong></font></label>
<input name="textinput-s" id="text1" placeholder="Dreder Name..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<label for="textinput-s"><font size="6"><strong>Daily Dredger Target:</strong></font></label>
<input name="textinput-s" id="text2" placeholder="Dreder Target..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
</form>
<p>Please click here to continue.</p>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="3">SITE AND DREDGER'S NAME AND TARGET.</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of Third page: #Dredger_Details -->
<div data-role="page" id="Dredger_Details">
<div data-role="header" data-position="fixed" data-theme="a">
<h1><strong><font size="5">DREDGER ACTIVITY.</font></strong></h1>
</div>
<!-- /header -->
<table>
<tr>
<th>
<font color="blue" size="5"><strong>Date:</strong></font>
</th>
<th colspan="8">
<label for="date"></label>
<input type="date" name="date" id="date1" value="" />
</th>
</tr>
<tr>
<td>
<form>
<h4>Start Time:</h4>
</form>
</td>
<td>
<form>
<label for="time"></label>
<input type="time" name="time" id="time" value="" />
</form>
</td>
</tr>
<tr>
<td>
<form>
<h4>End Time:</h4>
</form>
</td>
<td>
<form>
<label for="time"></label>
<input type="time" name="time" id="time1" value="" />
</form>
</td>
</tr>
<tr >
<td>
<strong>Effective Dredging(Mins):</strong>
</td>
<td>
<input id="txtChar" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Effective Dredging(Mins)..." />
</td>
</tr>
<tr>
<td>
<strong>Other Activities/Downtime(Mins):</strong>
</td>
<td>
<form>
<input id="Number1" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Other Activities/Downtime(Mins)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Main Eng(Hrs):</strong>
</td>
<td>
<form>
<input id="Number2" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Main Eng(Hrs)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Aux Eng(Hrs):</strong>
</td>
<td>
<form>
<input id="Number3" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Aux Eng(Hrs)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Main Eng Av. Diesel Usage (Ltrs/h):</strong>
</td>
<td>
<form>
<input id="Number4" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Main Eng Av. Diesel Usage (Ltrs/h)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Comments:</strong>
</td>
<td>
<div data-role="fieldcontain" style="padding:10px; margin:10px; ">
<textarea cols="500" rows="100" name="textarea" placeholder="Comments..." id="textarea5" style="height:300px;"></textarea>
</div>
</td>
</tr>
</table>
<form>
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
Cancle
</form>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="5">DREDGER ACTIVITY.</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page three -->
For that, you first need some code written in PHP , java or any other language running on your web server to process and save the form data.
every input field you put inside the tag will be send to the server when you submit the form. modify the action parameter of form to point to the code you have to handle data at server.
<form method = "post" action = "URL">
<input type="text" name="">
.
.
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
Cancle
</form>
As a beginner in web development you could have a good look at this free video tutorial about web forms.
http://webdesign.tutsplus.com/courses/web-form-design-and-development
After having gone through that you should know exactly what to do and will be well equipped for any form related questions in the future.
Too long for a comment:
Many things are not as they are supposed to.. The form tag should be around all the inputs providing data. It collects its information from its children (inputs) and sends it to a url. In your example, even with adding an action, you'll only get 1 or 2 inputs sent to your server. As mulla.azzi mentioned, you need to provide an action attribute as well. I don't know whether the script tags above are working, but language="Javascript"? never heard of it ... It can go on for quite a while..
While I strongly encourage following web design, and I see you've already tested and tried a bit, there really is a lot out of place in your code snippet. I strongly suggest you follow some tutorials / courses. Not only about HTML / CSS / JS, because that's the easy part. Everyone can write that. But also about the basic principles of stateless applications, server - client interaction. And you will also need to learn how you can recieve the data and do something with it..
Sadly, while there is a very low treshold to start building web pages (html, css), there's still a lot to learn untill you can actually build a functioning website.
I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#editRecord").validate();
});
</script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:
validate="required:'input[name=Question1][value=Yes]:checked'"
This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)
You can see a working demo here
You can do something like this:
$("#editRecord").validate({
rules: {
'Details1': {
required: function() {
return $('input[name=Question1]').val() == 'yes';
}
}
'Details2': {
required: function() {
return $('input[name=Question2]').val() == 'yes';
}
}
}
});
In response to Nick Craver's suggested response above, I found the correct syntax to be:
class="validate[required][name=Question1][value=Yes]:checked"
instead of what he posted.
Thanks for putting me on the right track, though!