CODEWITHSUNDEEP
javascriptvalidationalert
Vladimir Cvejic
Vladimir Cvejic

Reputation: 41

Validate input field, display error on submit and stop dialog open if error

I have a problem trying to validate my input field and alert the error, if number is below 50, i would like to know how to display an error popup (alert, or what ever), but to stop opening dialog modal if error occurred.

I did a script to force users write numbers below 50 with:

<script>
    function handleChange(input) {
        if (input.value < 50) input.value = 50;
        if (input.value > 1000000) input.value = 1000000;
    }
</script>

But once user type, for example: 23 and click on submit, it'll change the number in background to 50, but he would not be aware of that... What i can do about it?

Here's the full code i'm using:

<form id="testconfirmJQ" name="testconfirmJQ" method="post" onSubmit="return validator(users)" action="output.php">
    <label>
    <select id="selectUsers" class=" outtaHere" name="users" onChange='Choice();'>
        <option value="0" selected="selected">Choose...</option>
        <option value="1">Test</option>
    </select>
    </label>

    <input type="hidden" id="ids" name="ids" >
    <input type="hidden" id="use" name="username" >
    <input type="hidden" id="ful" name="full_name" >

    <p>
        How much?
        <input type="text" id="quantity" name="quantity" onchange="handleChange(this);">
        <div style="font-size: 12px; float: left;">*Minimum quantity: 50</div>
    </p>
    <input id="submitJQ" name="submitJQ" type="submit" class="styled-button-1" value="Send" />
</form>

<div id="dialog" title="Potvrdite">
    <div class="scroll-content">
        <ul class="countrylist">
            <img src="./images/png.png" class="vizitke"/>
        </ul>
    </div>
</div>

Thanks in advance...

Upvotes: 0

Views: 1222

Answers (3)

Akhil VL
Akhil VL

Reputation: 357

Add an hidden input, whose default vale is false(means no error)

<input type="hidden" id="error" name="error" value='false'>

Then customize you js,

<script>function handleChange(input) {
if (input.value < 50) { input.value = 50; document.getElementById('error').value='true';}
if (input.value > 1000000) input.value = 1000000;}

function validator(user){

var error; error    =   document.getElementById('error').value; if(error == 'true'){alert('customize your alert error'); return false;} } </script>

Upvotes: 0

alwaysLearn
alwaysLearn

Reputation: 6950

<script>
function handleChange(input) 
 {
    if (input.value < 50) 
    {
       alert('your alert');
       input.value = 50;
     }

     if (input.value > 1000000) 
     {
       alert('your alert');
         input.value = 1000000;
      }
     return false;
 }
 </script>

I this is what you are looking for

Upvotes: 1

user123_456
user123_456

Reputation: 5805

You can use this:

<script>
function handleChange(input) {
if (input.value < 50) {input.value = 50;alert("Your number is bellow 50!")}
if (input.value > 1000000) { input.value = 1000000;alert("Your number is above 1000000")}
}
</script>

Upvotes: 0

Related Questions