Forms, Controls, and Dialogs

Example One : Submit event

In this example , a button will clicked to send information to a server

The jQuery

$(document).ready(function(){// create new anonymous function
  $("form").submit( function(){//target the form
  	var error = false;//create new variable error with a state of false
  	$(this).find(":text").each(function(){//find all text inputs in the form
  		if ($(this).val().length == 0) {//if values of input is 0
			alert("Please Fill out all boxes");//alert the user to fill out form
  			$(this).focus();//puts cursor in blank box
  			error = true;//error - true
  			return false; // returns false
  		}//close if statement
  	});//close each function
  	if (error) {// if error
  		return false;//is false
  	}//close if
  	return true;//submit for
  });//close error if statement
 });//close anonymous function
 

The CSS

 #formOne p {
	margin:0;
	padding:0;
}

#formOne form input , textarea {
	border:1px dashed #FF0;;
	pading:5px;
	background:#000;
	color:#FFF;
}

The HTML

  <div id="formOne">  
          <form action="">
           <p>
              <label for="name">Name:</label>
              </p>
              <p>
              <input name="name" id="name" type="text"/>
           </p>
            <p>
              <label for="email">Email:</label>
              </p>
              <p>
              <input name="email" id="email" type="text"/>
            </p>
            <p>
              <label for="website">Web site:</label>
              </p>
              <p>
              <input name="website" id="website" type="text"/>
            </p>      
            <p>
              <label for="comment-text">Comment:</label>
              </p>
              <p>
              <textarea rows="10" cols="50" name="comment-text" id="comment-text"></textarea>
            </p>    
            <p>
              <input type="submit" value="Submit" />
              </p>
          </form>
    </div>
   

The Working Code

Below is the submit box with a basic validation to check and see if information has been submitted in all boxes.

Leave us a Comment

Example 2 : Validation Event

The validation event will change a box color when the the user fails to input some text

The jQuery

$(document).ready(function(){//new anonymous function
  $('#fst :submit').click(function(e) {//create a click function on submit button
    $('#fst :text, #cta').each(function() {//target the form and fore elememts
      if($(this).val().length == 0) {//if these areas have 0 content
        $(this).css('border', '2px dashed red');//run this on those areas
	  }//close if statement
    });//close each loop
    e.preventDefault();//stops script
  });//close click function
});//close anonymous function

The CSS

#formTwo p {
	margin:0;
	padding:0;
}

#formTwo form input , textarea {
	border:1px dashed #FF0;;
	pading:5px;
	background:#000;
	color:#FFF;
}

The HTML

<div id="formTwo">
        <form action="" id="fst">
          <p>
            <label for="name">Name:</label>
            </p>
            <p>
            <input name="name" id="name" type="text"/>
          </p>
          <p>
            <label for="email">Email:</label>
            </p>
            <p>
            <input name="email" id="email" type="text"/>
          </p>
          <p>
            <label for="website">Web site:</label>
            </p>
            <p>
            <input name="website" id="website" type="text"/>
          </p>      
          <p>
            <label for="comment-text">Comment:</label>
            </p>
            <p>
            <textarea rows="10" cols="50" name="cta" id="cta" type="text"></textarea>
          </p>    
          <p>
          	<input type="submit" value="Submit" />
        	</p>
        </form>
			</div>

The working Code

When a user fails to fill out a section of the form, the form inputs will turn red.