append required input into existing form

Question

I've got a small-big problem with ajax. Let's describe the situation:

I've got a form with submit=javascript:function()
function will call AJAX with some values, and on success I want to append some content with 'required' input to existing form.

I was trying many things, most from: How to set HTML5 required attribute in Javascript? , but still cannot reach it.

example code:

<form id="myFormID" action="javascript:mycustomsubmit()">
    <input type="text" id="add" style="margin:2px;" required>
    <input type="submit" name="add" value="Add" class="btn btn-primary">
    <textarea rows="5"  id="custom_add"></textarea>

(...) on ajax success clear form values and insert new required input:

$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');

so after this my html code looks like this:

<form id="myFormID" action="javascript:mycustomsubmit()">
        <input type="text" id="add" style="margin:2px;" required>
        <input name="anotherinput" type="text" required="">
        <input type="submit" name="add" value="Add" class="btn btn-primary">
        <textarea rows="5"  id="custom_add"></textarea>
</form>

And in fact it is (with this difference, that new input has required=""), but this new input is not required at all - I can send form even if this input is empty. I was trying to do it by append required, required="required", required=true, required="true", by append just input and then jQuery .prop or/and .attr, by JS examples from link - but it is still not working.

2nd question: After ajax append content and clear values I've got red border around required input field - is there any simple way to remove it (but to show this border and info if user will try to send form with this input empty) in FF,Chrome,IE ?

First post here...

Thanks in advance for any advices!

edit: what is interesting: when I've submitted my form few times (so I've got few input fields) and I executed $("input").attr('required',true).prop('required', false); then obviously form haven't got any required inputs. However when I've executed it with prop "true" then only original input is really required, all added by append still can be empty...

Just to clarify, your problem is that you want `` to be required but it isnt? — hjardine, Oct 01 '15 at 11:57
Try this in your script once AJAX succeeds..`$("input").prop('required',true);` — Sandeep Nayak, Oct 01 '15 at 12:00
at hjardine: yes, exactly. btw to clarify: html code looks similiar, but I've got required="" instead of just required and it doesn't matter on which way I'm trying to do it at SandeepNayak: I've tried it also - in html then I've got required="", but still I can send form with this input empty without any notification — z__i, Oct 01 '15 at 12:06
what is interesting: when I've submitted my form few times (so I've got few input fields) and I executed $("input").attr('required',true).prop('required', false); then obviously form haven't got any required inputs. However when I've executd it with prop "true" then only original input is really required, all added by append still can be empty... — z__i, Oct 01 '15 at 12:28

score 1 · Answer 1 · edited Oct 01 '15 at 13:57

1

Try this,

$("input").attr('required',true);

or

$("#name_add").attr('required',true);

edited Oct 01 '15 at 13:57

enigma

3,476
2
17
30

answered Oct 01 '15 at 12:10

user3040610

750
4
15

I've tried it, I've tried also: $("input").attr('required',true).prop('required', true); but still result is the same... – z__i Oct 01 '15 at 12:24

score 1 · Answer 2 · answered Oct 01 '15 at 12:17

This is a question consisting of multiple questions. So I'll try to identify and answer them separately.

How to append a new input field after your input field with ID "add" on submitting the form?

Try this instead (your selector was wrong):

$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');

How do I get rid of the red border?

I suggest that you use jQuery to handle the form submit (not tested):

    $('#myFormID').submit(function(e) {
    // Checking if all required fields are filled out.
    if (!e.target.checkValidity()) {
        // TODO: Not all required fields are filled out. Do something e.g. adding your new input field?

        // Preventing form submit to continue. I think this should prevent the red border. Not tested though...
        e.preventDefault();
    }
    else {
        // Everything is OK. Do whatever is needed.
    }
});

I'm not sure if I got your questions, but I hope it helps.

1. my mistake with copy-paste work, but thanks :) fixed 2. I want to have this border(s) from HTML5 required attribute when user click on "submit" button and have some of required fields empty, Just dont want to see this border when I'm after submit and clear value from field — z__i, Oct 01 '15 at 12:31

append required input into existing form

2 Answers2