jQuery validate skipping the second input field - javascript

I've got three form fields, two inputs and one textarea. When I hit the submit button before entering any data my browser says the first input field and the textarea must be entered, but the second input field is ignored. Does anyone got an idea how I should fix this?
Posted the code on http://jsfiddle.net/D5tk4/
Thanks!

Your input fields have id attributes but not name attributes. Inputs need to have name attributes.
http://jsfiddle.net/petersendidit/D5tk4/2/

Related

Fill out input field with code doesn't trigger onChange functions

I am working on customJs for swagger.
There I want to fill out an input field in advance for my use case.
Basically I can't see the code attached to the input field generated by swagger, but I can fill the input field with inputElement.setAttribute('value',"some stuff" )
But this does not trigger function as it seems, because when I proceed to use the submit button, it says the field is empty, only after I MANUALLY typed a letter and removed it, it recognized my changes.
Can I somehow trigger whatever the underlying function might be?

How to Validate Form fields one by one with Parsley Js

I am trying to Validate a Form with Parsley JS But when I hit submit it's adding error class in all fields but I want that it should validate fields one by one.
So if the 5 inputs are required and I it submits without filling any of them so want to show error in the 1st input only. after that if i fill 1st input and left the other 4 then it should show error in the second input only. I am just using this code for my form now.
$('#formid').parsley( //nothing here for now );
Set a specific priority to each input in the order you want them validated. Parsley will stop validation as soon as an error is detected at a given priority level.

Vuejs - re-focus an input-field after submit

I have built a form with Vuejs, which allows me to add word-pairs-objects to a array of words. After adding the focus should jump back to the first input field.
I have two forms on my page, the first one takes some general list information and will be hidden after submit. After this, the second form will be shown.
I tried this.$$.input_lang1.focus(), but the result was an error message (Uncaught TypeError: Cannot read property 'input_lang1' of undefined).
I also have tried it with jQuery. This results in a correct focus, but the value of the second input field will not be removed.
Here is the link to jsfiddle
Give the input an id, then use pure javascript.
For example, if the input id is initialInput:
document.getElementById("initialInput").focus();
Fiddle:
https://jsfiddle.net/76fua8js/2/

Form validation in javascript when drop down dependency is involved

I have used ng-disabled for my form validation for ADD button.
i.e. ng-disabled="conditionForm.$invalid". But , My form contains two text boxes which are hidden at first , and when a type is selected from drop down , only the respective Text box div should be visible. The Problem i'm facing is ,when the above ng-disabled validation is used , the ADD button is still disabled when one of the text box is selected and an input is provided. After the second input is also selected from the drop-down , then the ADD button is getting enabled.
Can you please provide me with an alternate validation , where the ADD button can get enabled every time a value is selected from drop down and a valid input is provided.
If you're ng-disabled is on a form being valid or invalid it sounds like those may have required inputs set. If that is case look at using ng-required so you can explicitly set required based on expression. You can then control when the form is valid.
The exact answer: Answer

Phone number masking using jquery - with three input fields

I want to create Phone field masking using jquery/javascript. I tried few jquery mask plugins. Still wants to find better solution for that. I have three input fields for USA(I must have three input fields).
Area code
Phone field1
Phone field2
My question is, when the user wrongly type in the phone numbers, and then wants to insert a number in the middle, it should work without affecting other inputs.
Example:
If the user enter inputs as
first input field: "abc"
second input field: "def"
third input field: "gh"
Then the user wants to input "x" in the middle of "d" & "e".
Then the input should accept the input as
abc, dxe, fgh respectively(It should work kind of auto next input field focus).
Please note: Three input fields are necessary.
Thank you.
try this link
$('#two').val($('#one').val().substring(3,4)+$('#two').val());
$('#one').val($('#one').val().substring(0,3));
$('#two').focus();
Using it on one textbox only. Can I use it on multiple textboxes.
maxlength=3 won't work. You need to get the last element to the other text box
Try the following code: (I am using id for input and you need to remove the maxlength attribute from the input boxes)
$("#first").on("input",function(e){
if($("#first").val().length>3){
$("#first").val($("#first").val().substring(0,3));
}
});

Categories