We Keep Coding

How to validate the dynamically created form using angularjs?

Actually I'm creating the form dynamically and i have done two way binding also. Now I want to do the validation.
Requirements:
If i have value in field for (eg. Name: Raja). If edit that value using $watch or $dirty we can check that modified or not. The same thing I want to get reverse also. Suppose I edited the value Raja to Raj and later again i'm adding the 'a' means Raja. If i give previous value again the status $dirty i should get false.
How can do this thing for whole form rather than giving each and every field.
Please help me anyone on this.
Here is my Plunker for simple example.

you should use something like $setPristine()
http://plnkr.co/edit/1LJ5alREMhFXOqO8ZWbj?p=preview

custom css error class not applying for the fields jquery validator

I have a form which contains two file input and two check box and one submit button. With my current code when the user click submit button the jquery validation will work perfectly but the problem was the custom error class was not applying and not removing correctly for example if the user click the check box that particular errorClassshould be removed this was not happening. When i search through SO I got one use full information it was mentioned instead of using border red for the check box or if the upload any file that particular field errRed class should remove and I try using outline-color but this was also not working. It might be simple somewhere I am missing some bit of code
I tried giving $('.chk_requ').removeClass('errRed_chkb'); still no use
Here is the fiddle link
kindly please help me.
Thanks in Advnace

Instead of remove class you can add empty div with id="diverr" there and give it desplay:none;
$("#diverr").text("Please select Gender");
$("#diverr").css("display","list-item");
if condition is false then
$("#diverr").css("display","none");

get radio box value in jquery

Am I under the wrong impression that jquery or JS can retrieve the values of radio buttons in a form? The reason i ask is because in my code the script i use to check for all fields in a form, does not seem to recognise the value in id="contact2" in the form, which is a radio group. I have posted my code at jsfiddle.net and would appreciate some feedback as to how I can correct this. Many thanks
Fiddle: http://jsfiddle.net/xGrb9/

You need to do it like this:
$('input:radio[name=bar]:checked').val();
Because of how radio buttons are checked/unchecked and their values are stored. (from the jQuery docs). You also need to make sure that the radio buttons have different IDs, which is a classic gotcha.
Finally, when testing if a radio button has not been selected at all, make sure to test against undefined and not an empty string for compatibility across browsers.
EDIT: looked at your code, and you need to do two things:
1. Change IDs of the buttons, to something like "contact2a" and "contact2b" so they are unique.
2. Change your var customer2 = line to var contact2=$("input[name=contact2]:checked").val();

Change this line:
var contact2=$("#contact2").val();
to:
var contact2=$('input[name="contact2"]:checked').val();
You need the checked because otherwise it finds both inputs.
Also, technically, all IDs should be unique, ie, not used on 2 elements on the page.

You should be able to use .val()
See this: http://api.jquery.com/val/

Both of your radio buttons have the same ID. That doesn't work in HTML. You'll have to refer to the buttons separately and select the one that is checked.

You can simply call
$("[name=contact2]:checked").val()

jqgrid - how do not show edit form if condition not met

Another jqgrid question. On my page i got a select drop down. If nothing is selecting and the user click to add record, the edit form should no popup. I can't seems to find how to do this in google. Here is what I have:
afterShowForm:function(formid) {
if ( ($('#listbox').val()) == "" ) {
alert('Please select an option.');
$('#'+formid, form).hide();
return false;
}
}
The above code is not working. It actually got error - form is not defined. Should I be using afterShowForm or is there a more proper way to do it.
Thanks.

Ok guys. I found a 'solution' but I am not sure if that is the best way to do it (I think it is not :) ) but it gets the job done.
Instead of using formid pass in through the function, I have view source and get the id of the edit form id. For my case the id is #editmodmy_table. So to hide the form from showing, I just use jquery to do it.
$('#editmodmy_table').hide();
Other than that, we have to get rid of the overlay that is attached to the edit form modal as well. Hiding the edit form don't hide the overlay automatically. So we have to do this:
$('.jqmOverlay').hide();
Hope this helps someone.
Please post a better solution to this if any. Thanks.

The error in this code means that the variable 'form' is not defined.
If I understand this correctly that variable is not needed.
To find the form and hide it you could try something like this instead:
$('form#'+formid).hide();

Setting the "type" attribute of an input does not work with jQuery attr() method

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.
Code for the form:
form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);
Code for the buttons:
form.append(
$(document.createElement('div')).
attr('class', classesHash.buttonsContainer).
append(
$(document.createElement('button')).
attr('type', 'submit').
addClass(classesHash.submitButton).
attr('title', i18n('Filter')).
attr('value', i18n('Filter')).
append(i18n('Filter'))
).
append(
$(document.createElement('button')).
attr('type', 'button').
addClass(classesHash.addButton).
attr('title', i18n('Add filter')).
attr('value', i18n('Add filter')).
append(i18n('Add filter')).
click(addFilter)
)
);
I made a more simple test with this HTML code:
<form action="" method="get"><button id="test">test</button></form>
When Chrome doesn't finds a submit button, any button submits the form.
The following doesn't works, the form gets submitted on button click:
$('#test').attr('type', 'button');
The following does works, the form does not submit on button click:
document.getElementById('test').setAttribute('type', 'button');
The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.

First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!
The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.
If you look in your console you'll see this:
Error: Uncaught type property can't be changed
Here's a quick test showing this, check the console to see the error jQuery throws.

Use prop instead of attr. It`ll work for sure.
Please look at the below sample code:
$("input[name='email']").focusin(function() {
console.log("alert");
$('#email').prop('type','number');
});
Let me know your thoughts on this.
Thanks

jQuery is working fine for me in Chrome ... all the functions I've thrown at it today are running just fine, including .attr()...

I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault?
$("#test").click(function(e) {
e.preventDefault();
//more work here....
});
EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?

So this post was helpful to me, but my solution was to clone the button in question and replace it
$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();