Geek asks and answers

Is there a very simple jquery check?

Hi, I want to add some simple validation to the form.

There are 2 text fields in which the user must enter only numbers and must be greater than zero. The jquery code is in its own file (the form consists of html / jquery / php). The first number is for "previous age" and the second number is for "current age". For example, if the user enters “0” in any text field, a warning or message box appears informing them that they need to enter a number greater than zero. Everything except the number greater than zero entered in the text field should contain a warning message.

As a note, the .php file is only used for calculation / math after the user clears the form requirements.

If someone could give a clear and concise example, this would be greatly appreciated. I tried to find a suitable example using a search on Google, but nothing seemed suitable. I also try to avoid using the validator plugin, which seemed to be supposed to answer a search related question. I have my reasons, and we will be happy to explain if necessary.

Thank you Charles

+3
source share
4 answers

If you remove the aspect of your question, the validation will be quite simple. All jquery will be used to simplify the selection of specific dom elements

$(function() {
  $('form').submit(function() {
    return checkFormIsValid();
  });
  $('#field1').keyup(function() {
    checkField(this.id);
  });
  $('#field2').keyup(function() {
    checkField(this.id);
  });
});

function checkFormIsValid()
{
  return checkField('field1') && checkField('field2');
}

function checkField(fieldId) 
{
  var val = $('#'+fieldId).val();
  // validation logic
  if(isValid) {
    return true;
  } else {
    alert(fieldId+ ' is not valid');
    return false;
  }
}

This basic check will be triggered for each field, as well as when the user submits the form.

+1
source

Ben Rowe , checkField (fieldId) , , .

Regex

+1
    var isEmail_re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
function isEmail(s) {
    return String(s).search(isEmail_re) != -1;
}

function isBlank(s) {
    if (!s || s.length == 0) {
        return true;
    }
    // checks for a non-white space character 
    // which I think [citation needed] is faster 
    // than removing all the whitespace and checking 
    // against an empty string
    return !/[^\s]+/.test(s);
}


function SendContactForm() {
    var isFormValid = true; 

    var isEmailOk = isEmail($('#cemail').val());
    if (isEmailOk == false) {
        $('#emEmail').css('color', 'red');
        isFormValid = false;
    }
    else {
        $('#emEmail').css('color', 'black');
    }

    var isNameOk = isBlank($('#cname').val());
    if (isNameOk) {
        $('#emName').css('color', 'red');
        isFormValid = false;
        //alert('!');
    }
    else {
        $('#emName').css('color', 'black');
    }

    var isSubjectOk = isBlank($('#csubject').val());
    if (isSubjectOk) {
        $('#emSubject').css('color', 'red');
        isFormValid = false;
    }
    else {
        $('#emSubject').css('color', 'black');
    }

    var isMesageOk = isBlank($('#cmessage').val());
    if (isMesageOk) {
        $('#emMessage').css('color', 'red');
        isFormValid = false;
    }
    else {
        $('#emMessage').css('color', 'black');
    }

    if (isFormValid) {


        $('#contactFormFields').hide("explode", 1000);


        $.post("/Home/SendContactForm", { email: $('#cemail').val(),
            name: $('#cname').val(),
            subject: $('#csubject').val(),
            message: $('#cmessage').val()
        },
                 function (data) {
                    if (data.length > 0) {
                        // alert(data);
                        }
         });
    }
}




 <div id="contactFormFields">

                    <table>
                        <tr>
                            <td style="width: 150px;">
                                E-Mail
                            </td>
                            <td>
                                <input id="cemail" type="text" value="E-mail" name="email" size="25" class="required email" /><em id="emEmail">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px;">
                                Name
                            </td>
                            <td>
                                <input id="cname" name="name" size="25" class="required" maxlength="100" /><em id="emName">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px;">
                                Subject
                            </td>
                            <td>
                                <input id="csubject" name="subject" size="25" class="required" maxlength="200" /><em id="emSubject">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px; vertical-align: top;">
                                Message
                            </td>
                            <td>
                                <textarea id="cmessage" maxlength="1000" name="comment" cols="27" rows="10" class="required"></textarea><em id="emMessage">*</em>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px;">
                            </td>
                            <td>
                                <input type="submit" value="Send" class="input-btn" onclick="SendContactForm();" style=" width:100px; color: Black;" />
                            </td>
                        </tr>
                    </table>

                    </div>
+1
source

Perhaps you are looking for a plugin to validate form fields?

you can try: http://www.vanadiumjs.com/ just add its js file and your readiness.

adding the required validation is as simple as adding css like this

 <input class=":required" type="text">

add integer check

<input class=":integer" type="text">

etc. just follow the link for more information.

0
source

More articles:


All Articles