Response title
This is preview!
Move this topic
How to validate input field within fieldset dynamically
in Using jQuery
•
6 years ago
Hi
i'm still new in jquery, i need to validate the field within fieldset dynamically without calling specific Id.
here is my code jSfiddle
As you can see, on the 1st page, when click continue, error on the 2nd page also will enable because on the part i pass the variable on visible fieldset still not success.
any idea to solve this issue? and please suggest the improve code to eliminate repeating line of same code.
I cannot use available jquery plugin because in my code have select list which is use ul li style not select option method.
Thanks in advance
1
Replies(23)
https://jsfiddle.net/jakecigar/Lomd9rkr/8/ is much shorter, and only deals with one fieldset at a time.
I didn’t use any of your ids, so they can all be removed.
JΛ̊KE
Leave a comment on jakecigar's reply
wow.. thanks a lot Jake, this is what i'm looking for 
Leave a comment on jCos's reply
The code is tight, and there are some tricks in there. Make sure you understand it all. You can ask questions about it.
JΛ̊KE
yes, for me as beginner, it quite difficult to understand,
could you explain about css code
- #my-form>:nth-child(n+2),
when i click the continue button, which line will trigger the event? and add showError class?
when the 1st fieldset hide, where the line trigger show 2nd fieldset? because this line for submit button right?
- if (nextFieldset.length === 0) alert("now submit via ajax!")
Leave a comment on jakecigar's reply
- #my-form>:nth-child(n+2),
is css for every child after the first. I assumed you would be adding more fieldsets.
- var nextFieldset = thisFieldset.next().show()
shows the next fieldset.
https://jsfiddle.net/jakecigar/Lomd9rkr/9/ validates email.
JΛ̊KE
thank you Jake for your answer, it very helpful, now i understand all the line of the code,
thanks again for the validate email address,your rock 
Hello Jake
I have another question, i tried to add event for press enter key, but it trigger both of the button, means the error for next fieldset also display
- if(event.keyCode == 13 || event.which == 13){
- $(buttons).trigger("click");
- }
here the code i tried jsFiddle
Leave a comment on jakecigar's reply
https://jsfiddle.net/jakecigar/Lomd9rkr/13/ takes out your code and adds
- $("input.magic-return").keydown(function(evemt) {
- if (event.which == 13) {
- $(this).closest("fieldset").find("[type=button]") .click();
- }
- })
and
<input id="email-add" name="email-add" class="mwf-text line ptm required magic-return" type="email">
<input id="lname" name="lname" class="mwf-text line ptm required magic-return" type="text">
JΛ̊KE
PS
event.keyCode is not needed with jQuery.
awesome, it's really simple and magic the way you do the code :)
think i have last question, if i want to pass the email value to 2nd fieldset, how to do it?
Leave a comment on jakecigar's reply
it is possible to do without call the id field for 2nd email?
yes, i still trying to make that checkbox work
How would I know where to put it? If you can think of a way, go for it.
JΛ̊KE
Hi Jake
I'm stuck again, i think it really simple, but i cannot find the way how to do it.
for the select list using ul li, which have class required in <ul> then no class selected in <li>, will addClass showError to next <span>
here the code https://jsfiddle.net/jCos/Lomd9rkr/16/
i do the wrong way by use condition length == 0, the class showError will not be added if one of ul.required have beend selected.
Leave a comment on jakecigar's reply
for the checkbox i just change the variable like this
- var empty = this.checked;
- $(this).next('span').toggleClass("hideError", empty).toggleClass('showError', !empty);
Looks good. I think you have the idea how to add more. Keep it up!
JΛ̊KE
Leave a comment on jCos's reply
Thanks a lot Jake for you help. really save a lot of my time to write code like this. thank you very much
I’ve spent a lot of time this past year thinking about validation. I now use HTML5 validation, and have written polyfills for the browsers that don’t yet completely support it. I am about to use it for the first time in a production site.
The world changes quickly!
JΛ̊KE
Leave a comment on jCos's reply
yes, the world changes quickly,
before this i just use old javascript style, but it need to write many line of code to get result, but same result with jquery only few line needed.
that why in my 1st post, my code is so long, still tie with the old javascript style 
hope 1 day, i also can think the way to write the code like you did. super awesome.
Leave a comment on jCos's reply
$("#email-add").change(function(){
$("#email2").val( $(this).val() )
})
just like I did in https://jsfiddle.net/jakecigar/Lomd9rkr/15/
JΛ̊KE
sorry..i forgot to update my code, here the latest one ==>> https://jsfiddle.net/jCos/Lomd9rkr/17/
so it only can be done by using id? cannot use other function like filter()?
Leave a comment on jakecigar's reply
You can try. I don’t know how filter would help for it.
JΛ̊KE
my bad, it already there, i just miss the $(this) selector function
- var empty = $(this).find('li.selected').length===0;
working code here https://jsfiddle.net/jCos/Lomd9rkr/18/
Leave a comment on jakecigar's reply
"so it only can be done by using id?"
You can use any selectors and jQuery functions that will find the button and the input. Jake used IDs in his Fiddle.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jCos's question
{"z7664639":[14737000007171139],"z641904911":[14737000007167064,14737000007167109,14737000007167113,14737000007167117,14737000007168089,14737000007168091,14737000007168093,14737000007169115,14737000007168095,14737000007168097,14737000007168099,14737000007169121,14737000007169181],"z2950240":[14737000007167103,14737000007167111,14737000007167115,14737000007167191,14737000007167193,14737000007167195,14737000007167197,14737000007167199,14737000007170141,14737000007170149]}
Statistics
- 23 Replies
- 12097 Views
- 1 Followers