简体   繁体   中英

Javascript validation doesn't work when a wrong value entered before

Guys I have a form like this(an aspx page): http://prntscr.com/8tmvge . I wrote validations each of them,And it is working properly. If user enter numeric value in name textbox (ex),it gives error and I'm clearing that textbox(only that textbox) but enter the accurate value and pressing send button, none of the validations and click events doesn't triggered.I couldn't understand how can I fix this? code is below:

Ekle.aspx:

<form id="form1" runat="server">

    <div id="ekle">
        <asp:Table ID="Table1" runat="server">
            <asp:TableRow ID="TableRow1" runat="server">
                <asp:TableCell>Id:</asp:TableCell>
                <asp:TableCell>
                    <asp:TextBox ID="txt1" runat="server" ></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt1" />
                </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow ID="TableRow2" runat="server">
                <asp:TableCell>Name:</asp:TableCell><asp:TableCell>
                    <asp:TextBox ID="txt2" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txt2" />
                </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow ID="TableRow3" runat="server">
                <asp:TableCell>Surname:</asp:TableCell><asp:TableCell>
                    <asp:TextBox ID="txt3" runat="server"/>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txt3" />
                    </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow ID="TableRow4" runat="server">
                <asp:TableCell>Sex:</asp:TableCell>
                <asp:TableCell>
                    <span id="spanddl">
                        <asp:DropDownList ID="ddl1" runat="server">
                            <asp:ListItem Value="Bay">Bay</asp:ListItem>
                            <asp:ListItem Value="Bayan">Bayan</asp:ListItem>
                        </asp:DropDownList>
                    </span>
                </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow ID="TableRow5" runat="server">
                <asp:TableCell>Email:</asp:TableCell><asp:TableCell>
                    <asp:TextBox ID="txt5" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txt5" />
                </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow ID="TableRow6" runat="server">
                <asp:TableCell>City:</asp:TableCell><asp:TableCell>
                    <asp:TextBox ID="txt6" runat="server" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txt6" />
                </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow ID="TableRow7" runat="server">
                <asp:TableCell>Age:</asp:TableCell>
                <asp:TableCell>
                    <asp:TextBox ID="txt7" runat="server" /> 
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txt7" />
                </asp:TableCell>
            </asp:TableRow>

            <asp:TableRow>
                <asp:TableCell>
                    <input id="ekle_gonder" type="button" value="Gönder" />
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
    </div>
</form>

ekle.js :

    $(document).ready(function () {

    var result = 1;
    var id, name, surname, email, city, age;

    $("#content").on('click', "#ekle_gonder", function (e) {


        var gender = $("#ddl1 option:selected").text();
        //var gender = document.getElementById('<%= ddl1.ClientID%>');
        //var gender2 = gender.options[gender.selectedIndex].value;

        check();

        var obj = {};
        obj.Id = id;
        obj.Name = name;
        obj.Surname = surname;
        obj.Sex = gender;
        obj.Email = email;
        obj.City = city;
        obj.Age = age;

        if (result == 1) {

            $.ajax({
                type: "post",
                url: "ShowRecord.aspx/ekle_func",
                contentType: "application/json;charset:utf-8",
                data: JSON.stringify(obj),
                dataType: "json",
                success: onSuccess,
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
                //complete:printAgain()
            });
        }
    });

    function check() {

        var mailregex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
        var textregex = /^[A-Za-z çğıöşü]{1,25}$/;
        var numregex = /(^\d+$)/;

        id = $("#txt1").val();
        name = $("#txt2").val();
        surname = $("#txt3").val();
        email = $("#txt5").val();
        city = $("#txt6").val();
        age = $("#txt7").val();

        if ((numregex.test(parseInt(id)) == false) || (parseInt(id) < 0)) {
            open_error_box("#ekle_id_error", "#txt1");
        }
        if ((name == '') || (textregex.test(name) == false)) {
            open_error_box("#ekle_name_error", "#txt2");
        }
        if ((surname == '') || (textregex.test(surname) == false)) {
            open_error_box("#ekle_surname_error", "#txt3");
        }
        if ((email == '') || (mailregex.test(email) == false)) {
            open_error_box("#ekle_email_error", "#txt5");
        }
        if ((city == '') || (textregex.test(city) == false)) {
            open_error_box("#ekle_city_error", "#txt6");
        }
        if ((numregex.test(parseInt(age)) == false) || (parseInt(age) < 0) || (parseInt(age) > 100)) {
            open_error_box("#ekle_age_error", "#txt7");
        }
        return result;
    }

    function open_error_box(error_name, name) {
        $(error_name).dialog("open");
        $(name).val('');
        result = 0;
    }

    function onSuccess() {

        $("#txt1").val('');
        $("#txt2").val('');
        $("#txt3").val('');
        $("#txt4").val('');
        $("#txt5").val('');
        $("#txt6").val('');
        $("#txt7").val(''); 
    }

    $(function () {
        $("#ekle").dialog();

        $("#ekle_id_error ,#ekle_name_error, #ekle_surname_error, #ekle_email_error, #ekle_city_error, #ekle_age_error").dialog(
        {
            autoOpen: false,
            buttons: [{
                text: "OK",
                click: function () { $(this).dialog("close"); }
            }]
        });
    });
});

By the way the id='content' selector is in another page.I'm loading Ekle.aspx into a div(in ShowRecord.aspx) when pressed 'ekle' button(inside ShowRecord.aspx again).ANd error dialog boxes are in ShowRecord.aspx also.

When you clear the textbox, you should change the result value as 1. Your result value just set as 1, when the document is ready. However, if there is something is wrong, you set it as 0, then you never change it as 1.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM