How to stop Jquery click stop calling server call if there is any client side error?-CodePudding

I have the below button on click function it is validating the client side textbox. But after rendering the validation errors it goes into the server call. I want to stop the server call. If there is any validation errors in the client side.

I used preventDefault and return false but nothing is working in my case.

Cshtml :

<div>

    <form asp-action="Index" asp-controller="Feedback" method="post" asp-area="Patient.Feedback" id="feedback" >
        @Html.AntiForgeryTokenOrchard()
        @Html.ValidationSummary("Your feedback was not submitted:")

        <div >
            <div id="errorurldiv" >
                <div >
                    <div >
                        <label  for="link">Link to the page where you found the error</label>
                        @Html.TextBox("link", (string)Model.Link, new { @class = "page-link field__input field__input--text" })
                    </div>
                    <div >
                        <div >
                            <label  for="clinicalcontentlink">Link to the page you want to provide feedback for</label>
                            @Html.TextBox("clinicalcontentlink", (string)Model.ClinicalContentLink, new { @class = "page-link field__input field__input--text" })
                        </div>
                    </div>
                </div>
            </div>
            <div >
                <label  for="profession">Are you a Health Professional?</label>
                <div >
                    <div >
                        <input  id="yes" type="radio" name="profession" value="Heath Professional" @(Model.Profession == "Heath Professional" ? "checked" : string.Empty)>
                        <label  for="yes">Yes</label>
                    </div>
                    <div >
                        <input  id="no" type="radio" name="profession" value="Patient" @(Model.Profession == "Patient" || string.IsNullOrEmpty(Model.Profession) ? "checked" : string.Empty)>
                        <label  for="no">No</label>
                    </div>
                </div>
            </div>
            
            @Display.Parts_Recaptcha()
            <input type="button" id="btn-submit"  data-sitekey="6LeFbiUUAAAAANuXwwXtMkpw_5vgJ3vo8NlsYdNw" data-callback="rcCallback" value="Send feedback"><span >Send Feedback</span></input>
        </div>
      
    </form>
</div>

Client Jquery :

$("#btn-submit").on('click',function (e) {
    e.preventDefault();
    const validationerrors = document.createElement('div');
    const form = document.getElementById("feedback");

    const ul = document.createElement('ul');
    const span = document.createElement('span')

    validationerrors.className = "validation-summary-errors";

    var validation = [];

    const emailValue = $('#email').val();
    const name = $('#Name').val();
    const Comment = $('#Comment').val();
    const aboutyourself = $('#AboutYourself').val();
    const country = $('#country').val();

    if (name === "") {
        validation.push("Your name is required");
    }
    if (Comment === "") {
        validation.push("Your feedback is required");
    }
    if (aboutyourself === "") {
        validation.push("Your aboutyourself is required");
    }
    if (emailValue === "") {
        validation.push("Your email address is required");
    }
    else if (!validateEmail(emailValue)) {
        validation.push("Invalid Email Address");
    }
    if (country === "") {
        validation.push("Your country is required");
    }
    
    if (validation.length > 0) {
        span.append('Your feedback was not submitted:');
        validationerrors.append(span);

        for (var i = 0; i < validation.length; i  ) {
            var item = document.createElement('li');
            item.appendChild(document.createTextNode(validation[i]));
            ul.appendChild(item);
        }

        validationerrors.append(ul);
        form.prepend(validationerrors);
        return false;
    }
});

I also tried submit function for the form as the below case. It stops working after first button click. Like on first click it render the client validation errors and after correcting the input the button is not even triggering anything.

$("#feedback").submit(function (e) {});

CodePudding user response：

Firstly,<input type="button"> will not submit the form when clicking it.If you want to submit the form when validation.length == 0.You can use $("#feedback").submit();.Here is a demo:

$("#btn-submit").on('click',function (e) {
    e.preventDefault();
    const validationerrors = document.createElement('div');
    const form = document.getElementById("feedback");

    const ul = document.createElement('ul');
    const span = document.createElement('span')

    validationerrors.className = "validation-summary-errors";

    var validation = [];

    const emailValue = $('#email').val();
    const name = $('#Name').val();
    const Comment = $('#Comment').val();
    const aboutyourself = $('#AboutYourself').val();
    const country = $('#country').val();

    if (name === "") {
        validation.push("Your name is required");
    }
    if (Comment === "") {
        validation.push("Your feedback is required");
    }
    if (aboutyourself === "") {
        validation.push("Your aboutyourself is required");
    }
    if (emailValue === "") {
        validation.push("Your email address is required");
    }
    else if (!validateEmail(emailValue)) {
        validation.push("Invalid Email Address");
    }
    if (country === "") {
        validation.push("Your country is required");
    }
    
    if (validation.length > 0) {
        span.append('Your feedback was not submitted:');
        validationerrors.append(span);

        for (var i = 0; i < validation.length; i  ) {
            var item = document.createElement('li');
            item.appendChild(document.createTextNode(validation[i]));
            ul.appendChild(item);
        }

        validationerrors.append(ul);
        form.prepend(validationerrors);
        return false;
    }else{
        $("#feedback").submit();
    }
});

CodePudding user response：

If I am understanding this correctly, you have added $("#feedback").submit(function (e) {}); to your code - this will prevent ANY form submission from happening.

Building off Yiyi/mostafa's answers:

Change the input type="button" to a button element with type="submit" - this will make the form submit when it is clicked.

ALSO: Change $("#btn-submit").on('click' to $("#feedback").on('submit' - instead of clicking the button and validating, we will allow the validation to happen when we submit the form.

THEN at the end, you STILL keep the return false (it won't submit) but change $("#feedback").submit(); to return true so the form will submit.

Example HTML:

<button type="submit">Send Feedback</button>

Example JavaScript:

// we get the form by ID and watch the submit function
const $form = $("#feedback"); // get the form

$form.on('submit',function (e) {
    // WE ARE NOT PREVENTING DEFAULT YET

    // we do not need to build out our validation elements because we may not need them

    let validation = []; // hold our error messages

    const emailValue = $('#email').val();
    const name = $('#Name').val();
    const Comment = $('#Comment').val();
    const aboutyourself = $('#AboutYourself').val();
    const country = $('#country').val();

    if (name === "") {
        validation.push("Your name is required");
    }
    if (Comment === "") {
        validation.push("Your feedback is required");
    }
    if (aboutyourself === "") {
        validation.push("Your aboutyourself is required");
    }
    if (emailValue === "") {
        validation.push("Your email address is required");
    }
    else if (!validateEmail(emailValue)) {
        validation.push("Invalid Email Address");
    }
    if (country === "") {
        validation.push("Your country is required");
    }
    
    if (validation.length > 0) {
        // build out our validation
        const validationerrors = document.createElement('div');
        validationerrors.className = "validation-summary-errors";
        const ul = document.createElement('ul');
        const span = document.createElement('span')

        span.append('Your feedback was not submitted:');
        validationerrors.append(span);

        for (var i = 0; i < validation.length; i  ) {
            var item = document.createElement('li');
            item.appendChild(document.createTextNode(validation[i]));
            ul.appendChild(item);
        }

        validationerrors.append(ul);
        // we already have jQuery grabbing our form, let's use it
        $form.prepend(validationerrors);

        // prevent form submission
        e.preventDefault();
        return false;
    } else {
        // no errors, submit form
        return true;
    }
});

CodePudding user response：

Complete code:

$("#feedback").submit(function (e) {
e.preventDefault();
var $form = $(this);
const validationerrors = document.createElement('div');
const form = document.getElementById("feedback");

const ul = document.createElement('ul');
const span = document.createElement('span')

validationerrors.className = "validation-summary-errors";

var validation = [];

const emailValue = $('#email').val();
const name = $('#Name').val();
const Comment = $('#Comment').val();
const aboutyourself = $('#AboutYourself').val();
const country = $('#country').val();

if (name === "") {
    validation.push("Your name is required");
}
if (Comment === "") {
    validation.push("Your feedback is required");
}
if (aboutyourself === "") {
    validation.push("Your aboutyourself is required");
}
if (emailValue === "") {
    validation.push("Your email address is required");
}
else if (!validateEmail(emailValue)) {
    validation.push("Invalid Email Address");
}
if (country === "") {
    validation.push("Your country is required");
}

if (validation.length > 0) {
    span.append('Your feedback was not submitted:');
    validationerrors.append(span);

    for (var i = 0; i < validation.length; i  ) {
        var item = document.createElement('li');
        item.appendChild(document.createTextNode(validation[i]));
        ul.appendChild(item);
    }

    validationerrors.append(ul);
    form.prepend(validationerrors);
    return false;
}else{
    $.post(
$form.attr(URL),
$form.serialize());
}
});