When pushing a button inside a partial view, parent form is validated - asp.net-mvc

Question

In a MVC 5 application, I have a partial view with a button to submit some information. But when I push that button the parent form is validated, making all the validating errors displayed. All I want is that only the validated fields in the partial view are executed with no interaction with the parent form.
Code update (partial view, UploadFile):
<form action="#Url.Action("Upload","File")" method="post" enctype="multipart/form-data">
<label for="photo">Photo:</label>
<input type="file" name="photo" id="photo" />
<input type="submit" value="Upload" />
</form>
Code parent form:
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CategoriaId, "CategoriaId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("CategoriaId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CategoriaId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Titulo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Titulo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Descripcion, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Descripcion, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Descripcion, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
#Html.Partial("UploadFile")
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>

Answer 1

Since you have a <form> tag inside the partial view and you put #Html.Partial("UploadFile") inside #using (Html.BeginForm()) block like below
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
....
....
....
#Html.Partial("UploadFile")
}
It will be rendered as nested forms like this
<h2>Create</h2>
<form>
....
....
....
<form action="/File/Upload" method="post" enctype="multipart/form-data">
<label for="photo">Photo:</label>
<input type="file" name="photo" id="photo" />
<input type="submit" value="Upload" />
</form>
</form>
which is invalid html. You need to move #Html.Partial("UploadFile") outside of #using (Html.BeginForm()) block
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
....
....
....
}
#Html.Partial("UploadFile")

Answer 2

This may cause due to nested form.
Make sure that child form is not nested inside another form.
the HTML specs forbid nested forms.
#using (Html.BeginForm())
{
..
}
#Html.Partial("UploadFile") // place it outside of main form
As partial view contain another form you need to place it outside of main form anotherwise it will be nesting(HTML specs forbid nested forms)