Nothing happens when submit button is pressed - html

Question

I do not know what I've done wrong, this works perfectly on the index page with of course another code, something smaller, but the form submits there.
Here I am trying to make a modal with a form, the form will be used to create a new article but the submit button isn't working, nothing is happening when it gets pressed. I really don't know whats wrong with it.
Code:
<div class="modal fade" id="createArticle" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create a new article</h4>
<small style="color:orange">Please add only important articles to the quick links</small>
</div>
<div class="modal-body">
<form onsubmit="return validate();" action="" method="post">
<div class="form-group">
<label for="createArticleTitle">Title:</label>
<input type="input" class="form-control" id="createArticleTitle" name="createArticleTitle" maxlength="250" placeholder="Insert Article Title...">
</div>
<!-- /.box -->
<div class="box">
<div class="box-header">
<h3 class="box-title">Article Message:<br>
<small><u>Text Formatting</u><br><br>
Use <code>[center] Your text here [/center]</code> to center your message.<br>
Use <code>[b] Your text here [/b]</code> to make your message <strong>bold</strong>.<br>
Use <code>[i] Your text here [/i]</code> to to make your message <i>italic</i>.<br>
Use <code>[u] Your text here [/u]</code> to underline your message.<br>
Use <code>[img] img url here [/img]</code> to insert a image.<br>
Use <code>[rigt/left] Your text here [/right/left]</code> to align your message on the right or on the left.<br>
Use <code>[ul] Your text here [/ul]</code> for a unordered list, use <code>[*]</code> to add items.<br>
Example: <code>[ul][*] Apple[/ul]</code> - dotes<br>
Example: <code>[ol][*] Apple[/ol]</code> - numbers<br><br>
Use <code>[quote] Your text here [/quote]</code> to add a quote.<br>
Use <code>[url=link] Your url title here [/url]</code> to insert a url.<br>
Use <code>[code] Your code here [/code]</code> to insert code.</small>
</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fa fa-minus"></i></button>
</div>
<!-- /. tools -->
</div>
<!-- /.box-header -->
<div class="box-body pad">
<form>
<textarea class="textarea" placeholder="Insert the article here..." id="createArticleMes" name="createArticleMes" maxlength="10000" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</form>
</div>
<br>
<div class="custom-controls-stacked">
<label for="createArticleQuick">Do you want to show this article to the Quick Links in the footer?</label>
<br>
<label class="custom-control custom-radio">
<input id="createArticleQuick" name="createArticleQuick" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Yes</span>
</label>
</div>
</div>
<button type="submit" name="createArticleButton" class="btn btn-default">Create</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the function too:
<script>
function validate(){
var n1 = document.getElementById("createArticleTitle");
var n2 = document.getElementById("createArticleMes");
if(n1.value != "" && n2.value != ""){
return true;
}
alert("You must add a title and a message atleast.");
return false;
}
</script>

Answer 1

Instead of using <form> tag without any attributes try using something like this
<form action="welcome.php" method="post">

Answer 2

The issue was that I was using twice
<div class="box-body pad">
<form>
<textarea class="textarea" placeholder="Insert the article here..." id="createArticleMes" name="createArticleMes" maxlength="10000" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</form>
</div>