A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html
Any issues with Assignment No. 6?
Brian Holt talk on ES6 + React at Fluent Conference, April 20-22, 2015
<input type="text" id="name" name="name" class="required">
Table 9-2. The Validation plugin includes methods that cover the most common validation needs. Source: JS&jQ:TMM, p. 282. Rule Explanation requiredThe field won’t be submitted unless this field is filled out, checked, or selected. dateInformation must be in the format MM/DD/YYYY. For example, 10/30/2009 is considered valid, but 10-30-2009 is not. urlMust be a full, valid web address like http://www.chia-vet.com. Partial URLs such as www.chia-vet.comorchia-vet.comare considered invalid.Must be formatted like an email address: bob@chia-vet.com. This class doesn’t actually check to make sure the email address is real, so someone could still enternobody@noplace.comand the field would pass validation.numberMust be a number like 32 or 102.50 or even –145.5555. However, the input can’t include any symbols, so $45.00 and 100,000 are invalid. digitsCan only include positive integers. So 1, 20, 12333 are valid, but 10.33 and –12 are not valid. creditcardMust be a validly formatted credit card number.
number and digits, might conflict with each other required: This field is required.date: Please enter a valid date.url: Please enter a valid URL.email: Please enter a valid email address.number: Please enter a valid number.digits: Please enter only digits.creditcard: Please enter a valid credit card number.title attribute
<input type="text" id="name" name="name" class="required" title="Please enter your full name.">(1) Set up a handler for the validate function
$( '#idOfForm' ).validate( {
// options go here
} ) ; // end validate();
(2) Specify options in JSON format
rules: { "fieldname" : "validationType" , "fieldname2" : "validationType" , // etc. }Example (JS&jQ:TMM p. 286)
1 $( '#signup' ).validate( { 2 rules: { 3 name: 'required', 4 email: { 5 required: true, 6 email: true 7 } 8 } 9 } ) ; // end validate()
Advanced Validation plugin rules. Source: JS&jQ:TMM, p. 287-288. Rule Explanation minlengthThe field must contain at least the specified number of characters. For example, the rule to make sure that at least six characters are entered into a field is this: minlength: 6maxlengthThe field must contain no more than the specified number of characters. For example, the rule to ensure that no more than 100 characters are entered into the field looks like this: maxlength:100rangelengthA combination of both minlength and maxlength. Specifies both the minimum and maximum number of characters allowed in a field. For example, the rule to make sure a field contains at least six characters but no more than 100 is as follows: rangelength:[6,100]minRequires that the field contain a number that’s equal to or greater than the specified number. For example, the following rule requires that the field both contains a number and that the number is greater than or equal to 10: min:10. In this example, if the visitor enters 8, the field won’t validate because 8 is less than 10. Likewise, if your visitor types a word — eight, for example — the field won’t validate and she’ll get an error message.maxLike min, but specifies the largest number the field can contain. To make sure a field contains a number less than 1,000, for example, use the following: max:1000rangeCombines min and max to specify both the smallest and largest numbers that the field must contain. For example, to make sure a field contains at least 10 but no more than 1,000, use this: range:[10,1000]equalToRequires that a field’s contents match another field. For example, on a sign-up form, it’s common to ask a visitor to enter a password and then verify that password by typing it a second time. This way, the visitor can make sure he or she didn’t mistype the password the first time. To use this method, you must specify a string containing a valid jQuery selector. For example, say the first password field has an ID of password applied to it. If you want to make sure the “verify password” field matches the first password field, you use this code: equalTo: "#password"
(3) If desired, specify custom error messages
messages: { fieldname: { methodType: 'Error message' } , fieldname2: { methodType: 'Error message' } }Example (JS&jQ:TMM p. 290)
(4) If desired, specify the error message position (see Step 4 in the tutorial in JS&jQ:TMM p. 298)
(5) If desired, specify what should be done when a field passes validation
(6) If desired, style your error messages
label tag with a class of error after the field that fails validation
<label for="email" generated="true" class="error">
label just as you can any DOM element
.error {
margin-left: 8px ;
color: red ;
font-style: italic ;
font-weight: bold ;
}
error class is added to both label and the input element that caused the errorlabel.error {
...
}
input.error, select.error, textarea.error {
...
}
Summary of Validation plugin configuration sections
Issue with my addMethod lessThanEqual —https://piazza.com/class/hi2cfz0f9096iw?cid=61
Having some issues with my code. Wanted to create a method for my validation that check to see if one number was less than or equal to another, but I have run into some issues. NetBeans keep spitting back the error "Uncaught TypeError: Cannot call method 'toLowerCase' of undefined". It then points me to the jQuery Validation file I have linked to the program. The remaining lines of errors look like this:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined (10:51:02:640 | error, javascript) at x.fn.extend.val (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:5:6227) at (public_html/index.html:15:91) at t.extend.check (public_html/jquery.validate.min.js:2:8996) at t.extend.element (public_html/jquery.validate.min.js:2:6450) at t.extend.defaults.onfocusout (public_html/jquery.validate.min.js:2:3233) at e (public_html/jquery.validate.min.js:2:4844) at (public_html/jquery.validate.min.js:2:20926) at x.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:5:14129) at v.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:5:10866) at x.event.trigger (http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:5:13255)I’ve written up a small example code to test just this method (see http://www.cs.uml.edu/~cburbine/lessthantest.html). The console spits out the same error. Any help would be appreciated. Thank you.
My response
The problem is that you're not using the parameters to the function passed to your addMethod correctly. The error is being cause by your return statement:
return this.optional(element) || parseInt(value) <= parseInt($(param).val());There are actually two problems.
First, your rule states:
lessThanEqual : trueYou should not be passing a Boolean here, you should be passing a number, such as:
lessThanEqual : 10Second, your return statement (above) tries to get the value (.val()) of something is not an HTML element ($(param)). param is not an element, so $(param) is not an element, so $(param).val() is meaningless. This is what is causing the jQuery validate plugin to crash.
To correct this second problem, use:
return this.optional(element) || parseInt(value) <= param ;Now, the interesting part here is how I figured all this out. I had not used the addMethod feature before, so I had to look it up. This is the trick to using APIs: knowing where to look things up and understanding how to interpret what you find there. To analyze your code I added five console.log statements:
console.log( "value = " + value + " (" + typeof( value ) + ")" ) ; console.log( "element = " + element + " (" + typeof( element ) + ")" ) ; console.log( "$(element).val() = " + $(element).val() ) ; console.log( "param = " + param + " (" + typeof( param ) + ")" ) ; console.log( "this.optional(element) = " + this.optional(element) ) ;which, when I typed a 1, produced the following output:
value = 1 (string) element = [object HTMLInputElement] (object) $(element).val() = 1 param = 10 (number) this.optional(element) = false
Once I had these insights on what was passed, fixing the code was rather easy.
Design Questions