I have a HTML form inside of a PHP file and I am trying to validate this form using Jquery. To my dismay,I am not able to have the form validated before the page is summited, ie refreshed. Furthermore, I have use seveal different plugins and I do not get any notifications of any kind. Here is the form as is:
<div id="contactRight">
<form method="post" action="form.php">
<input type="text" class="required" id="first" value="First*" ></input><br/>
<input type="Last Name" value="Last*" id="lastname"></input><br/>
<input type="text" value="Email*" id="email"></input><br/>
<textarea id="subject" id="subject">Subject*</textarea>
<input class="submit" type="submit" value="submit"></input>
</form>
Using the bassistance validation plugin it says that you can give your inputs a class with a value of "required" causing the validation plugin to kick in. I am overfly frustrated with my attempts of making this form work. More so, using HTML 5 is catastrophic, I do not receice any notifications of any input fields not being filled in. Is there a different approach I should be taking?
If you want to use HTML5's native form validation, do the following:
for input fields requiring a value, add required attribute in the input tag
for checking email, the input tag should have a type attribute as 'email'.
for other sorts of pattern matching, use pattern attribute with regex.
Reference:
https://blog.mozilla.org/webdev/2011/03/14/html5-form-validation-on-sumo/
http://www.developer.nokia.com/Blogs/Code/2012/11/21/creating-a-custom-html5-form-validation/
BTW, If you want to disable this native form validation, add novalidate attribute in form tag.
I have discovered the problem, I can add a placeholder tag which will allow me to keep the values empty. I had values, so the validator was working as expected. Silly Me. My next question though, is the placeholder tag applicable in all other browsers?
Related
i was making a website with PHP,jQuery,AJAX,mySQL which has lot of interaction with user. Now what i was asking that using forms are really necessary ?
what i have done for most of my user inputs are kinda like this -->
simple e.g
<div class="contact-form">
<input type="text" class="textInputs" id="name" placeholder="Enter your name..." />
<button class="submitButton" id="contactSend">Subscribe</button>
</div>
A SIMPLE comment system
<div class="comment-box" d-id="1">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
<div class="comment-box" d-id="2">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
JQUERY kinda this->
$('#comment').click(function(){
var id = $(this).closest('.comment-box').attr('data-id');
//ajax stuff
}):
Therefore what i wanna ask is whether this kinda structure is good or gonna cause some serious problem ?
Are using <form>'s compulsory ?
If you are submitting form by clicking submit button and posting variable to other pages or the same page then tag is necessary
If you are using form tag to find input values to post using ajax is necessary
If you are using ajax and pulling input values using dom id to post via ajax form is not required, in this case you may also need to do javascript validation using dom ids
Ideally using tag is better and follows standard HTML structure.
It depends upon your requirement and how you going to use the form in your project.
If you have min. no of fields ( 2-3 fields ) in your form. You can directly manipulate the form fields using id or name with JQuery or JavaScript. Otherwise you should have form tag to manipulate the data with more fields in the form.
I would recommend to have form tag in your page to maintain the standard format and use form tag and Ajax submission with Jquery.
Note: Anyway if you are going to get form data using Jquery, better to use the following syntax to get the from values:
// To check the radio button
var isAnsChecked = $("input:radio[name=<FIELDNAME>]").is(":checked");
var radio-value = $("input:radio[name=<FIELDNAME>]:checked").val();
// get Text box values
var text-value = $("input:text[name=<FIELDNAME>]").val();
I have the following input in a form
<input name="email" type="text" id="email"size="50" english="Email address" />
I have a custom tag called english, My question is can I send this as post data and can I recover it on my new page ?
Any help would be much appreciated , Thanks
If you use JavaScript to submit your form, you can read you custom tags' values ad append them to the form data to send. Otherwise, clean HTML form just submits only input tags value.
The best method I can think of right now is to have hidden field with the label as value. Like
<input name="email_label" type="hidden" id="email_label" value="Email address" />
The short answer is: no. The post data received from the HTML in your question will be an array with email as the key, and whatever the user typed as the value.
The solution depends on the problem you're trying to solve. Consider using a hidden input tag instead. For example:
<input name="language" type="hidden" value="English" />
Alternatively, a neater solution would be to store the language in the session (assuming that does what you need). You should never rely on the front end of a website "telling" the back end stuff like this, at least to a certain degree. The back end should just "know".
This might be a basic question of HTML but I'd like to know if it is possible in PHP. Usually when building a form submission page, the form tag is set per one form group. So the submit button is assigned per one form tag. The elements of form fields have to be close as enclosed in the form tag. If I want more complicated layouts, then is it possible to separate form tags to divide form fields?
For example,
<?php
print_r($_POST);
?>
<form name="test" action="" method="post">
First name: <input type="text" name="firstname" value="" /><br />
<input type="submit" value="submit" />
</form>
<p>some other contents</p>
<form name="test" action="" method="post">
Last name: <input type="text" name="lastname" value="" />
</form>
In this case, even if the second field is filled, the value won't be sent. If possible, I'd like to have just one submit button and control multiple forms.
Wrap your entire page into a single form and use some kind of deliminator for your elements (for instance "form2_field1"). I have never found having multiple forms useful (even if there are hide/unhide values) and my guess is that the submit button will probably only submit the form it is wrapped in. As one of the comments has mentioned, use JQuery if you want more complex forms. However, my recommendation is just to send over the entire form, whether it is complex or not and process it according to what you want.
How can I submit a form to itself without clearing the data in the fields using HTML, javascript and PHP?
You could take different approaches (e.g. cookies, jquery, etc...), however HTML + a line in PHP are more than enough in this case. Try this example code:
<form name="test" method="post">
Your Name: <input type="text" name="YourName" <?php if (isset($_POST['YourName'])) echo 'value="'.$_POST['YourName'].'"';?> >
<input type="submit" value="Submit">
</form>
In the code above if something has been posted to the receiving page (that can be the same page, such as in your case), then the posted value is printed out in the corresponding field. You can use this approach for all the fields composing your form.
If you want, you can also use similarly the $_GET method in the form.
If you use the traditional form submit, you need to save the parameters and rewrite the form input elements when you write the form the next time. But a better way is to use AJAX -- then the field data is sent without a form submission, and the input elements retain their data. See this link: http://www.w3schools.com/ajax/default.asp
How can I dynamically change a link based upon an input field in a form. For example, if I input 1.00 into the input field, I want to change the link to this:
donate.php?amount=1.00
Where the amount changes to the amount specified in the input field.
I'm guessing its JavaScript which isn't my strongest point but any help would be awesome. :)
Thanks
markup:
<input type="text" id="amount" onkeyup="changeLink(this);" />
donate now!
Javascript:
function changeLink(inputElement)
{
$('#donateLink').attr("href","donate.php?amount="+inputElement.value);
//console.log($('#donateLink').attr("href"));
}
jsfiddle working example here.
This can be done with html forms:
<form action="donate.php" method="GET" id="donateform">
<input type="text" name="amount" />
<input type="submit" value="Donate" />
</form>
You could also have input entered via a drop down list so they don't enter invalid values. Or you could validate the input with javascript. To use a link to submit the form, you can use javascript:
Donate
You don't need to do anything, just use a form. By using the GET method with a form and naming your input field 'amount', that will already be added to the URL at the time of form submission. Go ahead and try submitting a form when you enter 1.00 into the box. When the page loads, your URL will be donate.php?amount=1.00 like expected. The URL does not need to be changed whatsoever.
If you're using POST, I would merely suggest not doing this. It serves no purpose in that case.