表单runat = server中的Javascript验证

Question

I'm new to .NET and web development in general. I created a form to collect a user's comment and/or a file attachment. Everything works fine but I would like to add client side validation but it fails when I do so. Using Chrome's dev tools I can see the javascript is executed but the first statement fails saying "cannot read property value of undefined". If I remove the runat="server" properties, it works fine but I can no longer access the data from the code behind.

So what options do I have for making the javascript work? Or am I going about saving the data the wrong way?

aspx page:

<form id="commentForm" name="commentForm" runat="server" enctype="multipart/form-data" method="post" onsubmit="return validateCommentForm()">
    <p>Add Comment</p>
    <textarea id="Comment" name="Comment" rows="4" class="with-100" runat="server" />

    <input id="FileAttachment" type="file" runat="server" />

    <input type="submit" id="SaveComment" class="red-button" value="Submit" />
</form>

javascript:

function validateCommentForm()
{
    var x = document.commentForm.Comment.value;
    var y = document.commentForm.FileAttachment.value;
    if (x == '' && y == '')
    {
        alert("Either a commment or file must be supplied.");
        return false;
    }
}

c#:

protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack == true)
            {
                if (Comment.Value.Length > 0)
                {
                    Insert.UserComment(Comment.Value);
                }

                HttpPostedFile UserFileAttachment = Request.Files[0];
                if (UserFileAttachment.ContentLength > 0)
                {
                    Insert.FileAttachment(UserFileAttachment);
                }
            }
        }

Thanks in advance.

Answer 1

You can use jQuery, where you can call the form elements by the name as described in their API .

Retrieve the value:

$("input[name='Comment']").val();

To update the value (if needed) from JavaScript:

$("input[name='Comment']").val('some Comment');

You can also do it by ID (and based on your sample this should work) with the following jQuery:

$("#Comment").val();

So your final JavaScript would look like:

function validateCommentForm()
{
    var x = $("#Comment").val();
    var y = $("#FileAttachment").val();
    if (x == '' && y == '')
    {
        alert("Either a commment or file must be supplied.");
        return false;
    }
}

I do think there's something odd in accessing the file name from a file input box. See the file selector jQuery documentation .