a developer's notes – a semi-technical web development BLOG

November 13, 2014

Form Validation with Javascript events. Handle Input, Paste, and Keyup across all browsers

Filed under: Javascript / JQuery — Duy Nguyen @ 12:47 pm
Tags: , , , , , , , ,

While testing mobilePay in Chrome on an Android device, it was discovered that the
keyupevent was not firing for validation. Our response was to include input, an HTML5 event, to ensure that changes were firing the validation handlers.

$('form :input').on('keyup input', this.toggleSubmitBtn);

Currently, we are validating the form on every user’s input change, which would enable/ disable the submit button. The disadvantage of this is that we have to capture every single event that the user could possibly interact with the element.

The paste event is one of the events that we recently have implemented to handle. The inputevent we realize fires when the user pastes in an HTML5 browser, which means only non-HTML5 browsers actually need the pasteevent. Below is a table of support for paste validation:

$('form :input').on('keyup input paste', this.toggleSubmitBtn);

The paste event fires across all test devices, but javascript validation logic is carried out beforethe data on the clipboard gets placed into the element. Because all the browsers except for IE8 supported HTML5, however, the inputevent fired afterthe clipboard data was placed in the element. Without the inputevent, none of the browsers supported paste validation.

Solution

InputPropertyChange: function () {
    if (!window.addEventListener) { //IE 5-8 
        var $inputs = $("input[type!='hidden']");
        $.each($inputs, function (index, input) {
            $(index).on('paste'), function () {
                setTimeout( function() {
                    $(input).trigger('keyup');
                }, 250);
            }                
        });
    }
}

This was written up by my colleague Will Hanson and I.

Advertisements

January 8, 2014

How to add / remove textbox dynamically with jQuery

Filed under: Javascript / JQuery — Duy Nguyen @ 10:00 pm
Tags: , , , , , , ,

This is a great tutorial!
http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

<html>
<head>
<title>jQuery add / remove textbox example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
<style type="text/css">
	div{
		padding:8px;
	}
</style>
 
</head>
 
<body>
 
<h1>jQuery add / remove textbox example</h1>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
    var counter = 2;
 
    $("#addButton").click(function () {
 
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
 
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);
 
	newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
	      '<input type="text" name="textbox' + counter + 
	      '" id="textbox' + counter + '" value="" >');
 
	newTextBoxDiv.appendTo("#TextBoxesGroup");
 
 
	counter++;
     });
 
     $("#removeButton").click(function () {
	if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
 
	counter--;
 
        $("#TextBoxDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
	var msg = '';
	for(i=1; i<counter; i++){
   	  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
	}
    	  alert(msg);
     });
  });
</script>
</head><body>
 
<div id='TextBoxesGroup'>
	<div id="TextBoxDiv1">
		<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
	</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
 
</body>
</html>

May 7, 2013

Pass Hidden Input from View to MVC Controller

Filed under: ASP.NET,C# — Duy Nguyen @ 11:51 am
Tags: , , , , ,

Make sure your input has an id AND name attribute. Having just the id attribute will not work.

<% using (Html.BeginForm("MyAction", "Controller", FormMethod.Post, new { id = "formId", target = "_self" })) 
   { %>
     <input type="hidden" name="myHidden" id="myHidden" value="false" />
<% } %>

Then in the controller, access the form values like this.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MyAction(FormCollection form)
{
     string myHiddenInput= form["myHidden"];
}

April 9, 2013

Vertically Align Checkbox Next to a Div with an Image

Filed under: CSS / Styling — Duy Nguyen @ 12:58 pm
Tags: , , , , , ,

Check out this fiddle.

http://jsfiddle.net/eBY6Y/4/

September 5, 2011

Enabling a Server Side Disabled Control via Javascript

Filed under: ASP.NET,Javascript / JQuery — Duy Nguyen @ 1:11 pm
Tags: , , , , , ,

I had a ASP.NET check box that I disabled on the code behind code like this:

myCheckBox.Enabled = false;

I wasn’t able to enable it via javascript like this:

myCheckBox.ClientID.disabled = false;

Instead of using

myCheckBox.Enabled = false;

from my code behind. I used this instead

 myCheckBox.InputAttributes.Add(”disabled”, “disabled”);

I got this info from Jonas Bush’s blog post. Check it out in full detail here.
Click Here

Blog at WordPress.com.