How to add required on different form when button onclick

Question

Is it possible to add required on different form, before execute button?

let say I have a HTML code when I used this code in JS:

$(function() {
  $('#button1').click(function() {
    $("#email").prop('required', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="email" name="email" placeholder="Email*">
</form>
<form>
  <button id="button1">Submit</button>
</form>

the button keep execute even the textfield of email is null,

expected result: need to show this text if input field is null when click the button

jsfiddle

Andrei Todorut · Answer 1 · 2018-01-24T09:00:55.433

1

Working fiddle: https://jsfiddle.net/andreitodorut/xe3z0nas/

HTML:

<form id="form1">
  <input type="text" id="email_to" name="email_to" required="required" placeholder="Email*">
  <button class="hide submit-form">
  Submit
  </button>
</form>
<form data-submit="#form1">
  <button id="button1">Submit</button>
</form>

JS:

$(document).ready(function() {
    $('form[data-submit]').submit(function(e){
    e.preventDefault();

    var formToSubmit = $(this).attr('data-submit');

    if(formToSubmit){
        $(formToSubmit).find('.submit-form').trigger('click');
    }
  })
})

CSS:

.hide {
    display: none; 
}

UPDATE https://jsfiddle.net/9wbranL3/4/

edited Jan 24 '18 at 09:00

answered Jan 24 '18 at 08:15

Andrei Todorut

4,260
2
17
28

would be hard if I have more than1 input textfield, :( – flix Jan 24 '18 at 08:18
what would be hard ? You can't modify the first form ? – Andrei Todorut Jan 24 '18 at 08:20
actually I've 6 inputfield and 1 button for each form tag, so I cant modify your code for all of my inputfield, it's gonna be to long, – flix Jan 24 '18 at 08:22
could you give me the whole html in a `jsfiddle` please ? – Andrei Todorut Jan 24 '18 at 08:24
this is the whole inputfield required i've create https://jsfiddle.net/9wbranL3/1/ – flix Jan 24 '18 at 08:31
that code just work if email field is null, not for each null input textfield – flix Jan 24 '18 at 08:45
you talk about required fields ? – Andrei Todorut Jan 24 '18 at 08:46
sure, I'm asking about required **each** inputfield – flix Jan 24 '18 at 08:47
but you have to set the required attribute to each field you want to be required – Andrei Todorut Jan 24 '18 at 08:48
sure, my bad, I didn't see you add required at email form only – flix Jan 24 '18 at 08:53
sure, but i like to add required for each form like this https://jsfiddle.net/9wbranL3/4/ xD, thanks for the code sir – flix Jan 24 '18 at 08:58

score 1 · Answer 2 · answered Jan 24 '18 at 08:39

1

You just had to put everything in the same form.

As you can see, now that i've commented the separator, it works ^^

$(function() {
  $('#button1').click(function() {
    $("#email").prop('required', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="email" name="email" placeholder="Email*">
<!--</form>
<form>-->
  <button id="button1">Submit</button>
</form>

answered Jan 24 '18 at 08:39

Marco Salerno

5,131
2
12
32

same as Code Lღver comment : I've read [this post](https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields), and its showing what you say, but **I need to seperate form tag** for each input and button – flix Jan 24 '18 at 08:42
No you don't, trust me ^^ PS: It isn't the same comment, he added a useless attribute to the input – Marco Salerno Jan 24 '18 at 08:43
my input field with [separate form tag](https://pasteboard.co/H4nJOMX.png), and my input field in [1 form tag](https://pasteboard.co/H4nJsb1.png) – flix Jan 24 '18 at 08:50
I'm just modify the code that already created, so I won't learn css, and I'm not front-end dev xD – flix Jan 24 '18 at 08:55
I'm not a frontend developer too, but if you think that you can use different forms, it means that you aren't a backend developer, cause you didn't understand how does this aarchitecture works – Marco Salerno Jan 24 '18 at 08:57

score 0 · Answer 3 · answered Jan 24 '18 at 08:11

0

You have to put the button inside the same form tag.

HTML:

<form>
  <input type="text" id="email" name="email" placeholder="Email*">

  <button id="button1">Submit</button>
</form>

And the add the require attribute to email field, code is below:

  <input type="text" id="email" name="email" placeholder="Email*" required="true">

When you will submit the form it will check the blank condition and will show the same message are showing in the image.

answered Jan 24 '18 at 08:11

Code Lღver

15,573
16
56
75

I've read [this post](https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields), and its showing what you say, but I need to seperate form tag for each input and button – flix Jan 24 '18 at 08:13

How to add required on different form when button onclick

3 Answers3