जब इनपुट सत्यापन विफल हो जाता है, तो एंगुलरज फॉर्म सबमिट को रोकते हैं

Question

मैं कुछ क्लाइंट साइड इनपुट सत्यापन के साथ कोणीयज का उपयोग करके एक सरल लॉगिन फ़ॉर्म लिख रहा हूं ताकि यह जांचा जा सके कि उपयोगकर्ता नाम और पासवर्ड खाली नहीं है और तीन वर्णों से अधिक लंबा है। नीचे दिया गया कोड देखें:

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

और नियंत्रक:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

समस्या यह है कि login.submit इनपुट मान्य नहीं होने पर भी फ़ंक्शन को कॉल किया जाएगा। क्या इस व्यवहार को रोकना संभव है?

एक साइड नोट के रूप में मैं उल्लेख कर सकता हूं कि मैं बूटस्ट्रैप और आवश्यकता के रूप में भी उपयोग करता हूं।

Comments

stackoverflow.com/questions/18516001/…

— डेवलपर

क्या हम इसे फॉर्म टैग के बिना और फिर भी फॉर्म के बिना उपयोग कर सकते हैं।

— रिजवान पटेल

Answer 1

तुम कर सकते हो:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

नियंत्रक जाँच की कोई आवश्यकता नहीं है।

Comments

यह स्वीकृत उत्तर होना चाहिए। नियंत्रक में कुछ भी जांचने की आवश्यकता नहीं है

— होवी

मैं "नियंत्रक जांच की कोई आवश्यकता नहीं" से असहमत हूं। क्या होगा अगर हम अतिरिक्त सत्यापन जांच सबमिट फ़ंक्शन में करते हैं।

— स्लाटरकोड्स

निर्देश में अतिरिक्त सत्यापन करें। $ SetValidity के साथ सत्यापन को अपडेट करें।

— टीएमबी

@ b1tsh1ft यह मान्य होगा कि सत्यापन की वर्तमान स्थिति हमेशा प्रस्तुत की जानी चाहिए। यह कोणीय के सत्यापन के पूरे बिंदु की तरह है। जब कोई गुंजाइश इसके बारे में नहीं जानती है तो आपके पास अमान्य राज्य का कोई भी दृश्य संकेत नहीं हो सकता है।

— केविन बील

मैंने इस दृष्टिकोण की कोशिश की है, लेकिन ऐसा लगता है कि यह दोनों का मूल्यांकन करता है (जैसे कि &&मैंने बूलियन को शॉर्ट सर्किट नहीं किया है क्योंकि मैंने सबमिट के भाग के रूप में मूल्य में उत्तीर्ण करने की कोशिश की है और पुष्टि की है कि मूल्य स्वयं "झूठा" है

— आर्किमिडीज ट्रेजानो

Answer 2

सबमिट बटन को इसमें बदलें:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

Comments

बहुत बढ़िया जवाब। आपने धमाल मचाया!

— हर्षा.वासनी

यदि आप इनपुट फ़ील्ड पर ध्यान केंद्रित करते हैं, तब भी आप फ़ॉर्म को सबमिट कर सकते हैं!

— फेबसेनट

@ रीड: ऊपर टिप्पणी देखें।

— आंद्रेई रैनिया

बटन को अक्षम करने के दौरान आमतौर पर इसे हल करने का सबसे अच्छा तरीका है, यह वह नहीं है जो ओपी ने पूछा है।

— डाउनहैंड

उपयोगकर्ता के लिए दृश्य प्रतिक्रिया प्रदान करने के लिए इस तकनीक को एक साथ जोड़कर @Yashua उत्तर फॉर्म जमा करने से रोकने के लिए एकदम सही है। धन्यवाद!

— tkarls

Answer 3

तो TheHippo से सुझाए गए उत्तर ने मेरे लिए काम नहीं किया, इसके बजाय मैंने फ़ंक्शन को पैरामीटर के रूप में भेजने का काम किया जैसे:

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

यह प्रपत्र को नियंत्रक विधि में उपलब्ध कराता है:

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

Comments

मेरी भी यही समस्या थी। अपने तरीके से काम किया, हालांकि।

— पांडा

यह स्वीकृत उत्तर की तुलना में थोड़ा बेहतर है क्योंकि फ़ॉर्म जेएस में $ वैध चेक किया गया है न कि HTML में।

— cellepo

हालाँकि, मुझे नहीं लगता कि आपको फ़ंक्शन सबमिट करने के लिए loginForm पास करने की आवश्यकता है: मुझे लगता है कि $ गुंजाइश.loginform को JS में उपलब्ध होना चाहिए (कम से कम यह मेरे लिए था), इसलिए आप फ़ॉर्म को बदल सकते हैं। $ गुंजाइश के साथ $ मान्य ।loginform । $ मान्य।

— cellepo

Answer 4

ऑब्जेक्ट के रूप में आपके फॉर्म स्वतः ही $ दायरे में आ जाते हैं। इसके जरिए पहुंचा जा सकता है$scope[formName]

नीचे एक उदाहरण है जो आपके मूल सेटअप के साथ काम करेगा और फॉर्म को एनजी-सबमिट में पैरामीटर के रूप में पास किए बिना।

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

कार्य उदाहरण: http://plnkr.co/edit/BEWnrP?p=preview

Comments

यदि आप $ गुंजाइश के बजाय "As Controller" नोटेशन का उपयोग करते हैं तो आप फॉर्म का उपयोग कैसे करेंगे?

— मासिम्प्लो

@masimakopoulos: आप बस का उपयोग कर सकते हैं if(this.loginform.$invalid).. इसके बजाय लेकिन फिर HTML में आपको फॉर्म को नाम देना होगा <form name="ctrl.loginform" ..। और आप मान रहे हैं कि आप <div ng-controller="controller as ctrl"..अपने नियंत्रक-वाक्यविन्यास के रूप में उपयोग कर रहे हैं । धन्यवाद @JoshCaroll

— बार्ट

Answer 5

HTML:

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

आपके नियंत्रक में:

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

Comments

क्या वास्तव में ऑनसुबमिट विधि के तहत चेक करना आवश्यक है? इसका मतलब यह होगा कि आपको यह जांचना होगा कि इनपुट मार्कअप (कोणीय) और js कोड में सभी मानदंडों को पूरा करता है। मेरी राय में कोणीय को इनपुट अमान्य होने पर ऑनसुमिट को कॉल नहीं करना चाहिए। देखें benlesh.com/2012/11/angular-js-form-validation.html कह रहा है "एनजी-सबमिट को तब तक नहीं बुलाया जा सकता जब तक कि पूरा फॉर्म $ वैध न हो"

— रनर हेल्स

यदि फॉर्म वैध है तो आप बटन को निष्क्रिय करने की अनुमति नहीं दे सकते। आप फॉर्म को एनजी-सबमिट भी कर सकते हैं। यदि कोणीय फॉर्म सत्यापन को नहीं संभालता event.preventDefault()है, तो जाने का तरीका है, फॉर्म सबमिशन को रोकना।

— हिप्पो

@RunarHalse चेक करना वास्तव में आवश्यक है। मैं आपसे सहमत हूं कि यह इस तरह नहीं होना चाहिए। कारण यह है कि ऑनसुमिट विधि को उस उदाहरण में नहीं कहा जाता है जिसे आपने लिंक किया है क्योंकि उस उदाहरण में novalidate सेट नहीं है। ब्राउज़र घटनाओं को बढ़ाने से रोक रहा है, न कि कोणीय। यहाँ उसका उदाहरण w / nobalidate on: plnkr.co/edit/R0C8XA?p=preview है । प्रपत्र सबमिट करें पर ध्यान दें।

— davidmdem

एकदम सही मैं क्या देख रहा था,

— सेटिबोस

Answer 6

हालाँकि, ओपी प्रश्न का कोई सीधा हल नहीं है, यदि आपका फॉर्म एक ng-appसंदर्भ में है, लेकिन आप चाहते हैं कि कोणीय इसे पूरी तरह से अनदेखा कर दे, तो आप स्पष्ट रूप से ngNonBindableनिर्देश का उपयोग करके ऐसा कर सकते हैं :

<form ng-non-bindable>
  ...
</form>

Answer 7

बस ऊपर दिए गए उत्तरों को जोड़ने के लिए,

मैं एक 2 नियमित बटन कर रहा था जैसा कि नीचे दिखाया गया है। (कोई प्रकार = "कहीं भी" सबमिट न करें)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

कोई भी बात नहीं कि मैंने कितना प्रयास किया, एक बार फॉर्म वैध होने के बाद एंटर दबाएं , "क्लियर फॉर्म" बटन को दबाया गया, पूरे फॉर्म को क्लीयर किया गया।

एक समाधान के रूप में,

मुझे एक डमी सबमिट बटन जोड़ना था जो अक्षम और छिपा हुआ था। और यह डमी बटन अन्य सभी बटन के ऊपर होना चाहिए जैसा कि नीचे दिखाया गया है ।

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

खैर, मेरा इरादा कभी भी Enter पर सबमिट करने का नहीं था, इसलिए ऊपर दी गई हैक बस ठीक काम करती है।

Comments

आप अपने फॉर्म से एनजी-सबमिट की विशेषता को हटाकर प्रेस एन्टर पर भी जमा करना बंद कर सकते हैं

— कीरन

Answer 8

मुझे पता है कि यह एक पुराना धागा है लेकिन मुझे लगा कि मैं भी योगदान दूंगा। पोस्ट के समान मेरा समाधान पहले से ही एक उत्तर के रूप में चिह्नित है। कुछ इनलाइन जावास्क्रिप्ट चेक ट्रिक करती है।

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

Comments

यदि आप इनपुट फ़ील्ड पर ध्यान केंद्रित करते हैं, तब भी आप फ़ॉर्म को सबमिट कर सकते हैं!

— येवगेनी अफानसेयेव

Answer 9

मुझे पता है कि यह देर हो चुकी है और इसका जवाब दिया गया है, लेकिन मैं अपने द्वारा बनाए गए साफ-सुथरे सामान को साझा करना चाहूंगा। मैंने एक एनजी-वैध निर्देश बनाया है जो फॉर्म के ऑनसाइट को हुक करता है, फिर यह रोक-डिफ़ॉल्ट जारी करता है यदि $ eval गलत है:

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

अपने HTML में:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">