- jQuery(document).ready(function() {
- jQuery("#submit_btn").click(function() {
- //get input field values
- var user_name = jQuery('input[name=name]').val();
- var user_email = jQuery('input[name=email]').val();
-
- var user_message = jQuery('textarea[name=message]').val();
-
- //simple validation at client's end
- //we simply change border color to red if empty field using .css()
- var proceed = true;
- if (user_name == "") {
- $('input[name=name]').css('border-color','red');
- proceed = false;
- }
- if(user_email==""){
- $('input[name=email]').css('border-color','red');
- proceed = false;
- }
-
- if(user_message=="") {
- $('textarea[name=message]').css('border-color','red');
- proceed = false;
- }
-
- //everything looks good! proceed...
- if(proceed)
- {
- //data to be sent to server
- post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message};
-
- //Ajax post data to server
- jQuery.post('contact_me.php', post_data, function(response){
-
- //load json data from server and output message
- if(response.type == 'error')
- {
- output = '<div class="error">'+response.text+'</div>';
- }else{
- output = '<div class="success">'+response.text+'</div>';
-
- //reset values in all input fields
- jQuery('#contact_form input').val('');
- jQuery('#contact_form textarea').val('');
- }
-
- jQuery("#result").hide().html(output).slideDown();
- }, 'json');
-
- }
- });
-
- //reset previously set border colors and hide all message on .keyup()
- jQuery("#contact_form input, #contact_form textarea").keyup(function() {
- jQuery("#contact_form input, #contact_form textarea").css('border-color','');
- jQuery("#result").slideUp();
- });
- });
The code work great if I define <fieldset> ...</fieldset>
but if I use <form>...</form> don't work, special the red border in the input box not are fixed like in the case of use <fieldset>